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

最新推荐文章于 2024-03-16 09:55:53 发布

晴天.js

最新推荐文章于 2024-03-16 09:55:53 发布

阅读量390

点赞数

分类专栏： web-项目训练文章标签：前端 bootstrap json javascript

本文链接：https://blog.csdn.net/qq_43352505/article/details/129636991

版权

web-项目训练专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前端项目实战（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>

服务器

在项目开发中，前端程序员最烦的就是写好了界面但是后端一直没给接口，没有数据可咋测试呀，这个时候我们就可以用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
项目主体将会在未来一周内，整理更新完成，感兴趣的可以关注追更。

晴天.js

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端项目实战（bootstrap+json-server）搭建网站及后台管理-1准备工作

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

扫一扫