- 项目介绍
- 架构介绍
- 系统架构
- 技术架构
- 管理后台功能列表
- 前台小程序功能列表
- 数据库
- 后台管理工程的创建
- 创建springboot工程
- 引入依赖
- 配置文件
- 说明
- 前端Vue项目搭建
- 运行
- element-ui引入
- npm 安装
- 项目中引入element-ui
- axios框架配置
- axios安装
- axios组件封装
- 页面改造
面试宝典是一款面向程序员的面试刷题小程序。针对目前大量毕业学员在毕业之后直接去面试企业
的通过率低的问题，公司研发了面试宝典小程序，学员在空闲时间可以通过查看企业真实面试题，不仅
可以查看企业真题，也可以通过刷题寻找自己的短板进行补充
运营管理后台主要面向公司内部运营人员使用，访问人员主要来自公司内部，未来从安全性和访问
量考虑分析，可以和小程序端API接口应用隔离安装部署，所以也需要单独构建一个Web应用。
微信小程序面向前端用户，未来从业务增长速度来讲，可能访问的用户越来越多，故从安全性、可
维护升级和可扩展性等角度分析，微信小程序API接口需要独立安装部署，所以需要单独构建一个Web
应用；
- 创建后台接口springboot项目ms_backend。
- 拷贝坐标
- 创建包结构, 拷贝pojo, 工具类, 实体类, 配置文件
- 拷贝页面
pom.xml
配置文件4.0.0 org.springframework.boot spring-boot-starter-parent 2.4.12 1.8 org.springframework.boot spring-boot-starter-web org.springframework.boot spring-boot-starter-test test mysql mysql-connector-java runtime com.baomidou mybatis-plus-boot-starter 3.4.3.3 com.alibaba druid-spring-boot-starter 1.2.8 org.projectlombok lombok true org.springframework.boot spring-boot-starter-test test org.springframework.boot spring-boot-starter-redis 1.4.7.RELEASE io.springfox springfox-swagger2 2.9.2 io.springfox springfox-swagger-ui 2.9.2 com.alibaba fastjson 1.2.58 org.springframework.boot spring-boot-maven-plugin 2.4.12 org.projectlombok lombok
application.yml
spring:
datasource:
#1.JDBC
type: com.alibaba.druid.pool.DruidDataSource
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/msbd?useUnicode=true&characterEncoding=utf8
username: root
password: 123456
druid:
#2.连接池配置
#初始化连接池的连接数量 大小，最小，最大
initial-size: 5
min-idle: 5
max-active: 20
#配置获取连接等待超时的时间
max-wait: 60000
#配置间隔多久才进行一次检测，检测需要关闭的空闲连接，单位是毫秒
time-between-eviction-runs-millis: 60000
# 配置一个连接在池中最小生存的时间，单位是毫秒
min-evictable-idle-time-millis: 30000
validation-query: SELECt 1 FROM DUAL
test-while-idle: true
test-on-borrow: true
test-on-return: false
# 是否缓存preparedStatement，也就是PSCache 官方建议MySQL下建议关闭 个人建议如果想用SQL防火墙 建议打开
pool-prepared-statements: true
max-pool-prepared-statement-per-connection-size: 20
# 配置监控统计拦截的filters，去掉后监控界面sql无法统计，'wall'用于防火墙
filter:
stat:
merge-sql: true
slow-sql-millis: 5000
#3.基础监控配置
web-stat-filter:
enabled: true
url-pattern: /*
#设置不统计哪些URL
exclusions: "*.js,*.gif,*.jpg,*.png,*.css,*.ico,/druid/*"
session-stat-enable: true
session-stat-max-count: 100
stat-view-servlet:
enabled: true
url-pattern: /druid/*
reset-enable: true
#设置监控页面的登录名和密码
login-username: admin
login-password: admin
allow: 127.0.0.1
#deny: 192.168.1.100
mybatis-plus:
configuration:
map-underscore-to-camel-case: false
mapper-locations: classpath*:/mapper/*.xml
type-aliases-package: com.blb.msbd.pojo
# log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
# 设置后台服务端端口号
server:
port: 9001
说明
springboot使用Druid项目地址：
文档地址：https://github.com/alibaba/druid/tree/master/druid-spring-boot-starter
访问地址： http://localhost:tomcat端口号/项目名称/druid/login.html
springboot项目启动后直接访问并登录成功后，直接访问即可：
这里，我们将使用vue提供的脚手架快速搭建vue项目。
官方文档：https://cli.vuejs.org/zh/guide/
快速创建Vue项目的三种方案。前提：先安装好node.js环境。
vue create//文件名 不支持驼峰（含大写字母）
vue create msbd
default是使用默认配置
Manually select features 是自定义配置
这里我们选择自定义配置
此页面使用指令创建vue项目，过程中可能进行一些手动选择的初始化。是上下箭头切换选项，使用空
格进行选择与取消。
-
Babel 将ES6代码转ES5 （部分浏览器不支持部分ES6代码）
-
Typescript Javascript的超集 （最终需要编译成js）
-
Progressive Web APP 移动端支持
-
Router Vue路由支持
-
VueX Vue的状态管理模式 （数据管理中心）
-
CSS Pre-processors （CSS预处理、可以转为Less、Sass为CSS）
-
linter/Formatter 语法检查格式化工具
-
Unit Testing 单元测试
-
E2E Testing 端对端测试
根据项目需求安装插件,这里选择了Babel,Router,CSS Pre-procrssors,VueX，linter/Formatter
vue中普通模式路由后带有# 只切换#后内容
history模式下不带有#
y 回车
css 的预处理器选择的是 Sass/SCSS(with dart-sass) 。
node-sass是自动编译实时的，dart-sass需要保存后才会生效
sass 官方目前主力推 dart-sass
这里我选的第一个，选择 ESLint 代码校验规则，提供一个插件化的Javascript代码检测工具，
ESLint + Prettier 使用较多
选择什么时候进行代码校验，Lint on save 保存的时候检查，Lint and fix on commit 或者commit 的时候检查，建议选择第一个
下面就是如何存放配置，In dedicated config files 存放到独立文件中，In package.json 存放到 package.json 中
建议选择 In package.json
最后就是是否保存本次的配置，N 不记录，如果选择 Y 需要输入保存名字
选择y 下次使用vue脚手架创建项目时可直接选择本次的配置
npm run serveelement-ui引入
项目后期页面部分会使用到element-ui快速搭建vue界面，需要在整个项目中引入。
npm 安装官网：https://element.eleme.cn/#/zh-CN/component/installation
推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用
npm i element-ui -S项目中引入element-ui
在main.js
import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI)axios框架配置 axios安装
另外项目真个过程中会发送ajax请求，所以还需要引入axios框架
中文文档：https://www.kancloud.cn/yunye/axios/234845
npm install axiosaxios组件封装
如果每一个页面都需要使用axios，都需要import引入，然后创建，发送请求。导致axios实例过多，并
且如果要统一进行设置处理，就需要找到每一个axios进行配置，非常麻烦。
注意：文件夹下的名字叫index的文件在引入的时候是可以省略的。默认就找index名称文件。
import axios from "axios";
import qs from "qs";
// 创建一个axios实例对象
let instance = axios.create({
baseURL: 'http://localhost:9001/',
timeout: 3000,
});
// 添加axios实例请求拦截器，在请求头中添加用户登录的token信息
instance.interceptors.request.use(
config => {
var username = sessionStorage.getItem("userName");
if (sessionStorage.getItem(username)) {
config.headers[username] = sessionStorage.getItem(username);
config.headers["tokenname"]=username;
}
return config;
},
error => {
return Promise.reject(error);
}
);
// 定义一个http请求类，封装各种类型的axios请求
class http {
// 使用async ... await
static async awaitGet(url, params) {
// console.log(params)
return await instance.get(url, { params });
}
static async awaitPost(url, params) {
// console.log(params)
return await instance.post(url, qs.stringify(params));
}
static get(url, params) {
// console.log(params)
return new instance.get(url, { params });
}
static post(url, params) {
// eslint-disable-next-line no-console
console.log(params)
return instance.post(url, qs.stringify(params));
}
static post2(url, params) {
// eslint-disable-next-line no-console
console.log(params)
return instance.post(url, params);
}
}
// 导出
export default http;
其中，设置的interceptors拦截器部分到后面用户登录过程中进行详细说明，此处先做了解。
另外，单独提出了一个发送请求的js文件index.js（并提供好了部分示例）：
import Instance from "./http";
// 登录
export const loginSubmit = params => Instance.post2("/api/user/login", params);
// 退出
export const logout = params => Instance.post2("/api/user/logout", params);
// 用户列表
export const getUserByPage = params => Instance.post2("/api/user/findByPage", params);
//添加用户
export const addUser = params => Instance.post2("/api/user/register", params);
//删除用户
export const deleteUser = params => Instance.post("/api/user/delete", params);
//修改用户
export const updateUser = params => Instance.post2("/api/user/update", params);
//通过id查询用户用于数据回显
export const getUserById = params => Instance.post("/api/user/getUserById", params);
// 获取所有学科列表
export const getCourses = params => Instance.get("/api/course/findAll",params);
// 新增学科
export const addCourse = params => Instance.post2("/api/course/add",params);
//学科管理分页展示学科数据
export const getCourseByPage= params => Instance.post2("/api/course/findByPage",params);
//修改学科
export const updateCourse = params => Instance.post2("/api/course/update",params);
//删除学科
export const deleteCourse = params => Instance.post("/api/course/delete",params);
//查询所有学科
export const getAllCourse= params => Instance.post("/api/course/findAllCourse",params);
//查询所有学科,标签分类
export const findAllCourseCatTag= params => Instance.post("/api/course//findAllCourseCatTag",params);
//基础题库 分页展示题库数据
export const getQuestionByPage= params => Instance.post2("/api/question/findBasicByPage",params);
export const addBasicQuestion= params => Instance.post2("/api/question/addQuestion",params);
//企业
export const getAllCompany= params => Instance.post("/api/company/getAllCompany",params);
//分页查询企业
export const getCompanyByPage = params => Instance.post2("/api/company/findByPage", params);
//新增企业
export const addCompany = params => Instance.post2("/api/company/add",params);
//删除学科
export const deleteCompany = params => Instance.post("/api/company/delete",params);
//地区
export const getDicts= params => Instance.get("/api/company/getDicts",params);
页面改造
1、先删除默认提供的Home.vue、about.vue、HelloWorld.vue等vue文件。
其中，项目的main.js文件为项目的核心入口配置文件;App.vue文件为SPA项目的展示页面。
2、同时根据我们项目展示需要，删除App.vue文件中的两个默认的home、about的router-link标签。
3、另外，可以将提供的06-管理后台前端页面中的一些静态资源复制到项目的assets文件夹下。
4、后续的每一个页面中的样式都有存放在一个css/style.css文件中，也就是每一个页面都需要，所以可
以进行全局导入。
在main.js主入口配置中，导入刚引入的写好的css/style.css文件
后期会根据工具，对每一个页面都改造为单页面的vue文件
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import './assets/css/style.css'
Vue.config.productionTip = false
Vue.use(ElementUI)
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
