本文共 11077 字，大约阅读时间需要 36 分钟。

spring boot 分层图解

安装idea

配置阿里云镜像

   	
    		
     
      nexus-aliyun
     		
     
      central
     		
     
      Nexus aliyun
     		  		
     
      http://maven.aliyun.com/nexus/content/groups/public
     	
    
   

项目启动

1） 安装node.js(请自行安装)

2）切换到项目根目录 3）在项目根目录执行：

npm install -g cnpm --registry=https://registry.npm.taobao.org

//切换模块下载镜像地址

4）项目根目录执行cnpm install，下载该项目依赖模块 提示如果安装“360安全卫士”或“电脑管家”，一定要关闭，不然报错

5）添加mark-down编辑依赖

cnpm install mavon-editor --save

6）用于解析md文档依赖

cnpm install markdown-it --savecnpm install github-markdown-css

7）启动服务：项目根目录执行npm run dev,会自动打开前端首页（后端项目要提前部署好）

前端项目结构

build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的：8089，当然线上为
node_modules	npm 加载的项目依赖模块
src	要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：assets: 放置一些图片，如logo等。components: 公共组件。 router：路由。 App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。 main.js: 项目的核心文件。
static	静态资源目录，如图片、字体等。
index.html	首页入口文件，可以添加一些 meta 信息
package.json	项目配置文件
README.md	项目的说明文档，markdown 格式

项目前端模块中引入了vuex，存放vuex的系列文件：

vuex需要遵守的规则：

1、应用层级的状态应该集中到单个 store 对象中。2、提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。3、异步逻辑都应该封装到 action 里面。

1）首先 index.js 入口文件

2）store.js - 引入vuex，设置state状态数据，引入getter、mutation和action 3）state.js 相当于数据库 里面定义了数据结构，一些数据的初始状态 4）getters.js 顾名思义 取用，不做修改 5）mutation-types.js 存放Vuex常用的变量 引入mutation-types.js 操作里面定义的常用变量 6）action.js - 提交mutation以达到委婉地修改state状态，可异步操作

store.js文件

import VUE from 'vue'import VUEX from 'vuex'VUE.use(VUEX)const state = {
     isPractice: false, //练习模式标志  flag: false, //菜单栏左右滑动标志  userInfo: null,  menu: [    // {
       //   index: '1',    //   title: '考试管理',    //   icon: 'icon-kechengbiao',    //   content:[{item1:'考试查询',path:'selectExam'},{item2:'添加考试',path:'/addExam'}],    // },    // {
       //   index: '2',    //   title: '题库管理',    //   icon: 'icon-tiku',    //   content:[{item2:'所有题库',path:'/selectAnswer'},{item3:'增加题库',path:'/addAnswer'},{path: '/addAnswerChildren'}],    // },    {
         index: '1',      title: '成绩查询',      icon: 'icon-performance',      content:[{
   item1:'学生成绩查询',path:'/allStudentsGrade'},{
   path: '/grade'},{
   item2: '成绩分段查询',path: '/selectExamToPart'},{
   path: '/scorePart'},{
   item2: '成绩分科排序',path: '/selectExamToPart2'},{
   path: '/scorePart2'}],    },    {
         index: '2',      title: '批改试卷',      icon: 'el-icon-edit',      content:[{
   item1:'未批改的应用题',path:'/studentApplication'},{
   item2: '已批改的应用题',path: '/studentApplication2'}],    },    {
         index: '3',      title: '答疑解惑',      icon: 'el-icon-chat-dot-round',      content:[{
   item1:'发布问题',path:'/publishProblem'},{
   item2:'学生问题',path:'/solveProblem'}],    },    // {
       //   index: '6',    //   title: '教师管理',    //   icon: 'icon-Userselect',    //   content:[{item1:'教师管理',path:'/teacherManage'},{item2: '添加教师',path: '/addTeacher'}],    // },    // {
       //   index: '7',    //   title: '模块管理',    //   icon: 'icon-module4mokuai',    //   content:[{item1:'模块操作',path:'/module'}],    // }  ],}const mutations = {
     practice(state,status) {
       state.isPractice = status  },  toggle(state) {
       state.flag = !state.flag  },  changeUserInfo(state,info) {
       state.userInfo = info  }}const getters = {
   }const actions = {
     getUserInfo(context,info) {
       context.commit('changeUserInfo',info)  },  getPractice(context,status) {
       context.commit('practice',status)  }}export default new VUEX.Store({
     state,  mutations,  getters,  actions,  // store})

项目前端中index.html

项目中index.html和其他html差不多，但一般只定义一个空的根节点，在main.js里面定义的实例将挂载在根节点下，内容都通过vue组件来填充。

main.js里面定义的实例

new Vue({
     el: '#app',  router,  render: h => h(App),  components: {
    App },  template: '
   '})

App.vue

一个vue页面通常由三部分组成:模板(template)、js(script)、样式(style)

1. template
   其中模板只能包含一个父节点，<router-view/>为<router-view/> <router-view/>的简写，是子路由视图，后面的路由页面都显示在此处。
2. script
   vue通常用es6来写，用export default导出，其下面可以包含数据data，生命周期(mounted等)，方法(methods)等
3. style
   样式通过style标签<style></style>包裹，默认是影响全局的，如需定义作用域只在该组件下起作用，需在标签上加scoped，<style scoped></style>

main.js

main.js主要是引入vue框架，根组件及路由设置，并且定义vue实例。

// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router'import echarts from 'echarts'import axios from 'axios'import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'import VueCookies from 'vue-cookies'import mavonEditor from 'mavon-editor'import 'mavon-editor/dist/css/index.css'Vue.use(ElementUI)Vue.use(VueCookies)Vue.use(mavonEditor)Vue.config.productionTip = falseVue.prototype.bus = new Vue()Vue.prototype.$echarts = echartsVue.prototype.$axios = axiosnew Vue({
     el: '#app',  router,  render: h => h(App),  components: {
    App },  template: '
   '})

代码中的router相当于router:router，为ES6写法，在对象中，如果键值对一样的话，可以简写为一个；

components: { App }引入根组件App.vue，App即App:App；

template:'<App/>'是简写形式，等价于 <App></App>。

router

router下的index.js文件中的routes定义了路径为’/'的路由，该路由对应的页面是HelloWorld组件。

import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({
     routes: [    {
         path: '/',      name: 'login', //登录界面      component: () => import('@/components/common/login')    },    {
         path: '/changeUser',      name: 'changeUser',      component: () => import ('@/components/common/userManager')    },    {
         path: '/index', //教师主页      component: () => import('@/components/admin/index'),      children: [        {
             path: '/', //首页默认路由          component: () => import('@/components/common/hello')        },        {
             path:'/grade', //学生成绩          component: () => import('@/components/charts/grade')        },        {
             path: '/selectExamToPart', //学生分数段          component: () => import('@/components/teacher/selectExamToPart')        },        {
             path: '/selectExamToPart2', //学生分科成绩          component: () => import('@/components/teacher/selectExamToPart2')        },        {
             path: '/scorePart',          component: () => import('@/components/charts/scorePart')        },        {
             path: '/scorePart2',   //单科成绩排序          component: () => import('@/components/charts/scorePart2')        },        {
             path: '/searchStudentApplication',   //单科成绩排序          component: () => import('@/components/teacher/searchStudentApplication')        },        {
             path: '/allStudentsGrade', //所有学生成绩统计          component: () => import('@/components/teacher/allStudentsGrade')        },        {
             path: '/examDescription', //考试管理功能描述          component: () => import('@/components/teacher/examDescription')        },        {
             path: '/selectExam', //查询所有考试          component: () => import('@/components/teacher/selectExam')        },        {
             path: '/addExam', //添加考试          component: () => import('@/components/teacher/addExam')        },        {
             path: '/answerDescription', //题库管理功能介绍          component: ()=> import('@/components/teacher/answerDescription')        },        {
             path: '/selectAnswer', //查询所有题库          component: () => import('@/components/teacher/selectAnswer')        },        {
             path: '/addAnswer', //增加题库主界面          component: () => import('@/components/teacher/addAnswer')        },        {
             path: '/addAnswerChildren', //点击试卷跳转到添加题库页面          component: () => import('@/components/teacher/addAnswerChildren')        },        {
             path: '/studentManage', //学生管理界面          component: () => import('@/components/teacher/studentManage')        },        {
             path: '/studentApplication', //展示要批改的应用题          component: () => import('@/components/teacher/studentApplicationNoCorrect')        },        {
             path: '/studentApplication2', //展示批改过的应用题          component: () => import('@/components/teacher/studentApplicationCorrect')        },        {
             path: '/solveProblem', //展示问题          component: () => import('@/components/teacher/solveProblem')        },        {
             path: '/publishProblem', //展示问题          component: () => import('@/components/teacher/publishProblem')        },        {
             path: '/addStudent', //添加学生          component: () => import('@/components/teacher/addStudent')        },        {
             path: '/teacherManage',          component: () => import('@/components/admin/tacherManage')        },        {
             path: '/addTeacher',          component: () => import ('@/components/admin/addTeacher')        },      ]    },    {
         path: '/student',      component: () => import('@/components/student/index'),      children: [        {
   path:"/",component: ()=> import('@/components/student/myExam')},        {
   path: '/manager', component: () => import('@/components/student/manager')},        {
   path: '/update_stuinfo', component: () => import('@/components/student/update_stuinfo')},        {
   path: '/examMsg', component: () => import('@/components/student/examMsg')},        {
   path: '/message', component: () => import('@/components/student/message')},        {
   path: '/studentScore', component: () => import("@/components/student/answerScore")},        {
   path: '/scoreTable', component: () => import("@/components/student/scoreTable")}      ]    },    {
   path: '/answer',component: () => import('@/components/student/answer')},    {
   path: '/registerstudent', component: () => import('@/components/student/registerstudent')},    {
         path: '*',      redirect: '/'    }  ]})

整个页面渲染过程

访问http://localhost:8088/显示的就是index.html页面，index.html原本只有一个根结点id=“app”。

main.js入口文件引入根组件App 前边我们已经提到，根组件App中，<router-view/>是子路由视图，后面的路由页面都显示在此处，访问http://localhost:8088/，路由为‘/’，根据路由文件index.js，所以引入login组件。

login.vue

由于在config文件夹下index.js文件下创建"api"，代替target里面的地址（后台请求），后面组件中我们掉接口时直接用api代替

关于矢量图图标的使用

引入JQuery依赖

cnpm install jquery --save

github-markdown-css样式文件-一般用作文章正文的样式美化

1.下载到项目中

cnpm i github-markdown-css

2.将样式放到模块化vue目录下,然后在 style中导入

3.在vue脚手架中的 .postcssrc.js文件中加入 exclude: ‘github-markdown’ //css样式文件

module.exports = {
     // 配置要使用的 PostCSS 插件  plugins: {
       // 配置使用 autoprefixer 插件    // 作用：生成浏览器 CSS 样式规则前缀    // VueCLI 内部已经配置了 autoprefixer 插件    // 所以又配置了一次，所以产生冲突了    // 'autoprefixer': {
    // autoprefixer 插件的配置    //   // 配置要兼容到的环境信息    //   browsers: ['Android >= 4.0', 'iOS >= 8']    // },    // 配置使用 postcss-pxtorem 插件    // 作用：把 px 转为 rem    'postcss-pxtorem': {
         rootValue ({
    file }) {
           return file.indexOf('vant') !== -1 ? 37.5 : 75      }, // 配置要转换的 CSS 属性      // * 表示所有      propList: ['*'],      exclude: 'github-markdown'   //css样式文件    }  }

4.在需要美化的正文部分加入github-markdown-css样式文件的 主样式类名

markdown-body 生效

           
   
        
   
    the end
         

转载地址：http://reawi.baihongyu.com/