前端项目实战（bootstrap+json-server）搭建网站及后台管理-1准备工作

前端项目实战（bootstrap+jsonserver）搭建网站及后台管理-准备工作

项目实战永远程序员成长最快速的一种方式，无论是算法思想还是语言技巧，百炼才成钢。

第一章 项目介绍

本项目是一个简单的门户网站加后台管理的结构，但是还是建议您在跟随这个项目之前，您需要会一些HTML、Css、JavaScript、bootstrap、Ajax、node.js的基础知识。

bootstrap

框架介绍

框架链接: bootstrap

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。

Bootstrap提供的样式，组件能够帮助我们快速的建立起项目骨架，开发事半功倍，bootstrap的手册连接已经放在开头，感兴趣的可以去看看。

框架引入

第一步，现在官网下载生产文件，解压放在项目文件夹中；

第二步，在项目的html文件中引入框架文件

服务器

在项目开发中，前端程序员最烦的就是写好了界面但是后端一直没给接口，没有数据可咋测试呀，这个时候我们就可以用json-server以零代码的方式获得一个完整的REST(get,post,put,delete增删改查） API。
那么怎么搞到这样一个好用的服务端呢，首先你需要安装node.js，并配置好相关环境，至于怎么下载配置环境，c站大把教程。相信总有适合你的。配置好node.js以后，就可以在vscode中开始使用了。
配置json-server
-g 很重要，它表示你在全局都引入json-server，以后你在任何一个项目下都可以直接使用了。

npm i json-server -g 

监听服务端口
默认监听的是3000端口，加port可以帮你改变监听的端口

json-server .\db.json --watch db.json --port 5000

项目效果图

1，后台登录注册页面

2，后台系统主页

tips
项目主体将会在未来一周内，整理更新完成，感兴趣的可以关注追更。