运用技术：spring、spring MVC，spring boot，mybatis，vue
根据需求和原型图，画ER关系图；然后创建数据表，形成数据库。
CREATE DATABASE shujuku DEFAULT CHARACTER SET utf8;
USE shujuku;1.点击左上
Database2.选择页面右上
+3.选择Data Source → MySql(要运用的数据库)
1.选择要使用的数据表，点击右键，选择EasyCode(多种工具根据喜好选择)→Generate Code
2.根据需求，选择entity、servi、controller等(建议就创建实体类)
3.构建统一响应实体类respondentity
1.创建controller层，为控制器，导入service层，通过接收前端传过来的参数进行业务操作。
@Autowired(required=false)：表示忽略当前要注入的bean，如果有直接注入，没有跳过，不会报错。
2.创建service层，为业务层，进行事务的管理操作。该层可以容乃多个Dao对象，方便业务的统一管理操作
MVC是web开发中常用的程序结构，mvc意为：
（1）model模型层，主要作用于数据
（2）view视图层，隶属前端，主要为页面渲染布置
（3）controller控制层，接受前端的用户传递的指令，并调用后端执行相应操作
随着互联网开发，业务越来越多，逻辑越来越复杂，为减轻开发人员的困难，将model层分为
service、Dao两层层：service负责调用Dao层，并负责业务逻辑的处理；
Dao是data access object缩写，意为
数据访问对象，即直接与数据库对接。
3.创建serviceimpl层，负责管理实现类。
service层下分serviceimpl层，负责直接调用dao层。
即随着代码结构的提升，service层处理业务逻辑和调用dao层的功能，直接细分为不同的层级。
@Service注解：作用于类上，标记当前类是一个service类，并将当前类自动注入到spring容器中，不需要再在applicationContext.xml文件定义bean。（spring boot中减去applicationContext.xml文件，用注解代替）
@Service
public class RbacManagerServiceImpl implements RbacManagerService {
@Autowired
RbacManagerDao rbacManagerDao;
@Override
public ResponseEntity findAll() {
//分页
List<RbacManager> rbacManagerList=rbacManagerDao.findAll();
ResponseEntity<List> listResponseEntity=new ResponseEntity<>();
listResponseEntity.setData(rbacManagerList);
listResponseEntity.setCode(200);
listResponseEntity.setMessage("查询成功！！!");
return listResponseEntity;
}
}4.创建Dao层，负责对接数据库。
Dao层分为dao和mapper两层：
dao层负责封装对数据库的访问：增删改查的结果；
mapper层文件类型为xml，直接对数据库操作，相应的结果回返实体类，或封存数据的dto。
<mapper namespace="com.xxx.dao.RbacManagerDao">
<select id="findAll" resultType="com.xxx.entity.RbacManager">
select * from rbac_manager
</select>
</mapper>MVC架构分层的主要作用是解耦。
前提：安装好nodejs和vue cli。
nodejs：基于 Chrome V8 引擎的 JavaScirpt 运行环境，类似java中的jdk。
vue cli：脚手架(代码生成器)，可以快速生成基于Vue的完整前端框架，单独编译部署。可以再集成各种第三方插件，扩展出更多的功能。
创建方法：
1.通过window+r输入cmd打开dom命令窗口，输入：“cd 文件夹”命令，到达指定文件夹，输入：vue creat 项目名，即可创建vue项目
2.在VScode终端，进入指定文件夹下，输入：vue creat 项目名称，创建vue项目
3.下载相应若伊等模板，或者拿别人的vue项目，直接使用更改
主要配置后台接口域名，和请求路径的格式
注：dist和config为平级目录。
dist下存放前端资源：html页面和静态资源(css文件、js文件、image、font等，归纳static子目录)
config为配置文件夹，下面存放配置文件：index.js、prod.env.js和dev.env.js
1.index.js配置文件解析
'use strict' //严格模式
var path = require('path') // path是node.js的路径模块，用来处理路径统一的问题
module.exports = {
// 下面是build也就是生产编译环境下的一些配置
build: {
// 导入prod.env.js配置文件，只要用来指定当前环境
env: require('./prod.env'),
//path.resolve() 方法会把一个路径或路径片段的序列解析为一个绝对路径。
index: path.resolve(__dirname, '../dist/index.html'), //引用路径的方式和html引用图片类似，“../”就是返回上级目录
adminIndex: path.resolve(__dirname, '../dist/admin.html'),
// 下面定义的是静态资源的根目录 也就是d目录
assetsRoot: path.resolve(__dirname, '../dist'),
// 下面定义的是静态资源根目录的子目录static，也就是dist目录下面的static
assetsSubDirectory: 'static',
// 下面定义的是静态资源的公开路径，也就是真正的引用路径
assetsPublicPath: 'https://cdn.XXXX.cn/resource/',
// 下面定义是否生成生产环境的sourcmap，sourcmap是用来debug编译后文件的，通过映射到编译前文件来实现
productionSourceMap: true,
// 下面是是否在生产环境中压缩代码，如果要压缩必须安装compression-webpack-plugin
productionGzip: false,
// 下面定义要压缩哪些类型的文件
productionGzipExtensions: ['js', 'css'],
// 下面的process.env.npm_config_report表示定义的一个npm_config_report环境变量，可以自行设置
bundleAnalyzerReport: process.env.npm_config_report
},
//前端服务器配置
dev: {
// 引入当前目录下的dev.env.js，用来指明开发环境
env: require('./dev.env'),
// 下面是dev-server的端口号，可以自行更改
port: 443,
// 开发环境配置
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
// 下面是代理，作用是用来，建一个虚拟api服务器用来代理本机的请求，只能用于开发模式
proxyTable: {
'/api': { //这里最好有一个 /
target: 'http://localhost:8080/', // 后台接口域名
// ws: true, //如果要代理 websockets，配置这个参数
// secure: false, // 如果是https接口，需要配置这个参数
changeOrigin: true, //是否跨域
pathRewrite: {
'^/api': '/'
}
}
},
// 各种开发服务器设置
host: 'localhost', //可以被process.env.HOST覆盖
port: 8080, // dev-server的端口号，(运行测试页面的端口 可以自行更改 )(可以被process.env覆盖)
autoOpenBrowser: true, //是否自定代开浏览器 (项目启动后浏览器自动打开项目主页)
errorOverlay: true, // 在浏览器是否展示错误蒙层
notifyOnErrors: true, //是否展示错误的通知
poll: false, // 指定webpack检查文件的方式 使用poll选项（以轮询的方式去检查文件是否改变）
//选择一种source map格式来增强调试过程
devtool: 'cheap-module-eval-source-map',
// 指定是否通过在文件名称后面添加一个查询字符串来创建source map的缓存
cacheBusting: true,
//是否开启 cssSourceMap
cssSourceMap: true
}
}注意：proxyTable中配置的target和pathRewrite是组合使用。
proxyTable下'/api'作用：使用代理之前，api是标识，接口以"/api"为首才能用代理，使用代理之后就生成请求路径http://localhost:8080/api/XX;
pathRewrite中'^/api'作用：为简化请求路径省去'/api'，将其设为'/'，请求路径变为http://localhost:8080/XX;
即：'^/api'中^为拼接符，target+pathRewrite形成后台访问路径
2.prod.env.js的配置内容解析
'use strict' //严格模式
module.exports = {
//NODE_ENV是环境变量，这里指定production环境
NODE_ENV: '"production"'
}3.dev.env.js的配置内容解析
'use strict' //严格模式
// 首先引入的是webpack的merge插件，该插件是用来合并对象，也就是配置文件用的，相同的选项会被后者覆盖
var merge = require('webpack-merge')
// 导入prod.env.js配置文件
var prodEnv = require('./prod.env')
// 将两个配置对象合并，最终结果是 NODE_ENV: '"development"'
module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
})
1.build.js：对 webpack 开发和打包的相关设置，包括入口文件、输出文件、使用的模块等
2.config：项目配置文件
3.dist：存放html页面和静态资源(css文件、js文件、image、font等，归纳static子目录)
4.node_moudles：存放nodejs配置各种包的文件夹
5.src：存放路由、各个页面、引用资源、组件等
6.babelrc：将ES6代码转换成浏览器能够识别的代码，用来兼容绝大多数的主流浏览器。
7.editorconfig：配置文件以及编码等信息，代码的规范文件、规定使用空格 缩进等代码风格
8.postcssrc.js：指定使用的 css 预编译器，里面默认配置了 autoprefixer ，自动补全浏览器前缀
9.package-lock.json：当 node_modules 或 package.json 发生变化时自动生成的文件。这个文件主要功能是确定当前安装的包的依赖，以便后续重新安装的时候生成相同的依赖，而忽略项目开发过程中有些依赖已经发生的更新
10.package.json：指定项目开发和生成环境中需要使用的依赖库
首先导入：import 页面名字 from '@路径'
访问路径：path
路由名字：name
调用页面：component
/**
* 首页
*/
//平台简介
import describe from '@/views/home/describe';
//时讯新闻
import news from '@/views/home/news';
//自定义的页面路由
{
path: '/index',
name: '首页',
component: index,
iconCls: 'el-icon-tickets',
children: [
//首页-平台简介
{
path: '/home/describe',
name: '平台简介',
component: describe,
meta: {
requireAuth: true
}
},
//首页-时讯
{
path: '/home/news',
name: '实训新闻',
component: news,
meta: {
requireAuth: true
}
},
}
页面效果：用html、css编排基本的效果
详细布局：用element组件，
<el-container>：外层容器。
<el-header>：顶栏容器。
<el-aside>：侧边栏容器。
<el-main>：主要区域容器。
<el-footer>：底栏容器
<template>
//界面样式、排列、布局
</template>数据操作：
ES6语言：元素定义let、var、const；模板字符串；箭头函数；对象解构；传播操作符； map数组；reduce
vue基本指令：v-bind(:)；v-if；v-for；v-on(@)；v-model
请求后端数据：axios
<script>
//数据传输
</script>