网站后台管理系统如何开发?

来源：千锋教育

发布人：xqq

时间： 2023-10-14 04:39:50

一、网站后台管理系统的开发

1.技术栈

前端有Vue.js、Element-UI 、 BootStrap、Lin-CMS-Vue后端有SpringBoot、SpringMVC、Mybatis-plus、Swagger。数据库是MySQL。

2.环境配置

下载Lin-CMS-Vue和Lin-CMS-SpringBoot开源框架，下载好后开始配置环境：

前端安装node.js就可以了(安装的node.js自带了npm前端包管理工具)；

装好后打开cmd命令行工具，cd 进入到前端项目路径下lin-cms-vue，然后输入npm install，回自动安装依赖包。

然后cmd命令行工具，cd 进入到前端项目路径下，输入npm run serve启动服务。

打开后台管理系统首页地址： http://localhost:8080/，导入数据库，打开navicat数据库可视化工具(需要提前下载)，新建数据库名lin-cms，导入打包好的sql文件，sql在Lin-cms-spring-boot/src/main/resources/schema中。

后端只需要有IDEA编译器，然后打开后端项目lin-cms-spring-boot，整个文件夹拖到编译器就可以，右击pom.xml，找到maven，点击Reimport导入依赖包。maven就相当于后端管理依赖包的工具。类比npm就是前端包管理工具。

3.数据库设计

以酒店管理系统为例子：

旅客(编号、身份证号、预定时间、离店时间、姓名、性别、年龄、实际入住时间)

房间(编号、类别、名称、价格、状态)

订单(编号、关联旅客ID、关联客房ID、总金额)

员工(权限类别)

4.后端实现业务接口

使用：SpringBoot、Mybatis、SpringMVC

MVC：模型层、控制层、视图层

模型层对应数据库实体DO，也就是一张数据表有什么字段，那么这个模型的对象就要有对应的属性。对应model文件夹。另外有VO对应想展示给用户的对象(比如一个DO的某个属性可以不展示给对象)、DTO作为数据更新或创建时候的对象。

控制层对应请求、响应的处理，对应Controller文件夹；业务逻辑处理对应Service文件夹；数据处理对应mapper文件夹。

视图层View，前后端分离后应该就不需要了。

延伸阅读：

二、框架推荐

Vue

轻巧、高性能、可组件化的MVVM框架，前端三大框架之一（React、Vue、Angular）,中文文档完善上手简单（Vue国内公司用的比较多，React国际上用的较多），当然除了Vue框架本身，还可以配合使用其他组件，比如vuex，vue-router、axios、Vue-Cli脚手架等组件（Vue全家桶）

Element-UI

基于 Vue.js的UI组件库（其他的UI库还有iview等）,布局、表单、表格等常用控件基本都能满足

ECharts

使用 JavaScript 实现的开源可视化库，各种折线图、柱状图、路径图等酷炫的制图应有尽有（数据分析展示必备）

声明：本站稿件版权均属千锋教育所有，未经许可不得擅自转载。