前端项目实战（bootstrap+json-server）搭建网站及后台管理-1准备工作_bootstrap后台管理设计
赞
踩
前端项目实战（bootstrap+jsonserver）搭建网站及后台管理-准备工作
项目实战永远程序员成长最快速的一种方式，无论是算法思想还是语言技巧，百炼才成钢。
第一章 项目介绍
本项目是一个简单的门户网站加后台管理的结构，但是还是建议您在跟随这个项目之前，您需要会一些HTML、Css、JavaScript、bootstrap、Ajax、node.js的基础知识。
bootstrap
框架介绍
框架链接: bootstrap
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。
Bootstrap提供的样式，组件能够帮助我们快速的建立起项目骨架，开发事半功倍，bootstrap的手册连接已经放在开头，感兴趣的可以去看看。
框架引入
第一步，现在官网下载生产文件，解压放在项目文件夹中；
第二步，在项目的html文件中引入框架文件
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../../lib/css/bootstrap.css">
<script src="../../lib/js/bootstrap.bundle.js"></script>
<link rel="stylesheet" href="index.css">
</head>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
服务器
在项目开发中，前端程序员最烦的就是写好了界面但是后端一直没给接口，没有数据可咋测试呀，这个时候我们就可以用json-server以零代码的方式获得一个完整的REST(get,post,put,delete增删改查） API。
那么怎么搞到这样一个好用的服务端呢，首先你需要安装node.js，并配置好相关环境，至于怎么下载配置环境，c站大把教程。相信总有适合你的。配置好node.js以后，就可以在vscode中开始使用了。
配置json-server
-g 很重要，它表示你在全局都引入json-server，以后你在任何一个项目下都可以直接使用了。
npm i json-server -g
- 1
监听服务端口
默认监听的是3000端口，加port可以帮你改变监听的端口
json-server .\db.json --watch db.json --port 5000
- 1
项目效果图
1，后台登录注册页面
2，后台系统主页
tips
项目主体将会在未来一周内，整理更新完成，感兴趣的可以关注追更。
