vue2作品总结（vue+javaweb）

一 所用技术及框架

1 前端 vue

1.1 router(路由)  配合"router-link标签"用于实现组件间的本地跳转，减少向服务器的发送请求
1.2 vue-x(全局事件总线) 用于不同组件对象间对同一数据的操作访问
1.3 相关插件的使用
		1.3.1 element-ui  一些基础组件的使用，如button,icon
		1.3.2 axios  用于创建 http ，转换请求数据和响应数据 ，与后端服务器进行数据互动

2 后端 Javaweb Tomcat MySQL

后端是基于javaweb和tomcat服务器和mysql数据库的使用。应用servlet处理，打包好的由vue转换成的浏览器可识别的js文件所发送的数据请求以及数据响应

二 作品思路

vue文件使用路由router访问不同的组件，使用vuex布置全局事件总线
todolist组件为todolist，并使用本地存储loaclStorge把任务存储到本地浏览器。
使用Javaweb调用servlet，mysql处理访问前端发起的请求和数据库存储的账号密码，实现账户的登录，注册及退出（session的销毁）

三 问题及解决

问题1 打包好的vue文件转换成js文件，放在javaweb工程里，页面无法识别跳转到vue文件
解决： 1 路由配置(router–index.js)时，把mode改为Hash模式，似乎默认也是Hash模式，以防万一

router--index.js
//创建并暴露一个路由
export default new VueRouter({
    mode:"hash"  ,  //设置为Hash访问模式
    routes:[{path:'/todolist',
             component:ToDoList,
             children:[{path:'myheader',component:MyHeader}]

       2  打开vue.config.js文件    在路径添加“./”  我页不太清除为啥要加这个，好像是vue打包的项目资源路径的“#”缘故。我之前没加，怎么就是访问不了vue的文件。在网上搜了好久，才解决。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false, //关闭语法检查
  publicPath:"./"   //路径添加“./”

})

问题2 vue文件与servlet进行数据传输
本来我是想在vue文件插入a标签访问servlet，发现方法可行。然后servlet给vue文件传输数据又不行了，因为打包好的vue文件是html类型的。我就想把html类型改为jsp类型，结果不行。
解决：在原来的vue文件中引入axios插件，axios可以向服务器发送请求，并且接收服务端传回的json格式的数据

四 作品展示

登录页面

点击登录会向服务器发送请求，然后servlet通过mybatis访问数据库验证账号密码，最后跳转到vue的todolist组件（使用本地存储访问里面的数据）

动态倒计时页面

点击“个人信息”会通过axios插件向服务器发送请求，sevelet通过axios以json格式写回到vue,vue再加载到组件上

点击“退出登录”会销毁session，然后跳转到登录界面

五 作品代码

1 vue项目结构（红色区域会测试代码，直接忽略）

vue项目结构组略解释

node_modules ： 存放npm命令下载的开发环境生产环境的依赖包

public：  静态资源，一般不会去修改什么
	这个文件下有一个index.html,这个是Vue项目的主页面，Vue项目要挂载，在main.js挂载的app，就是这个index.html的div#app
	
src : 项目主要的包，一般程序在这个包下写

assets ： css文件存放的包

components：  存放Vue组件的包, 根据自己的需求写的组件一般放在这个包下，组件是复用的

router ： Vue 路由， 一般只有一个index.js文件，都是自己创建（命名不限），主要是配置Vue路由的配置文件

App.vue： 主组件入口，会在main.js文件有配置

main.js： Vue 项目的整个配置一般都在main.js文件引入，比如引入vue-router,

package-lock.json: 包括了node_modules中所有包的信息，包含包的名称，版本号，下载地址

package.json : 下载的依赖和插件都会在这个文件更新（只能锁定大版本，不能锁定小版本），和pom.xml差不多

2 javaweb项目结构（“npm run build” 打包vue文件为dist文件夹）

3 项目启动顺序
项目在启动的时候会像编程题一样从上到下的扫描启动， 扫描结束后，会在webapp根目录下找到一个主页面(index.js) 入口，然后展示在浏览器上。

最后根目录下的唯一一个入口页面index.js， 浏览器也默认打开这个页面

vue.config

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false, //关闭语法检查
  publicPath:"./"

})

main.js

import store from "./store/index"
//引入VueRouter
import VueRouter from 'vue-router';
//引入路由器
import router from "./router/index";
//引入element插件
import { Progress,Icon} from 'element-ui';
//引入ivew插件
import iView from 'view-design'
import 'view-design/dist/styles/iview.css';
// import 'element-ui/lib/theme-chalk/index.css';
import './utils/dayjs'

import axios from "axios";//引入axios

//关闭vue的生产提示
Vue.config.productionTip = false
Vue.use(iView)
Vue.use(VueRouter)
//单个应用插件
Vue.component('my-progress', Progress);
Vue.component('my-icon', Icon);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */
Vue.prototype.$axios=axios

//创建vm
new Vue({
  render: h => h(App),
//    将app组件放入容器中
  store,  //添加store
  router:router,//添加路由
  beforeCreate() {
    Vue.prototype.$bus=this;//安装全局事件总线
  },
}).$mount('#app')

vuex(store----index.js)

//该文件夹创建vuex最为核心的store

//引入vuex
import Vuex from 'vuex'
//引入vue
import Vue from 'vue';
//准备action-用于响应组件中的动作
const actions = {}
// 准备mutations-用于操作数据（state）
const mutations = {}
// 准备stste-用于存储数据
const state = {
    year:new Date().getFullYear(),
    month:new Date().getMonth(),
    day:new Date().getDay(),

}
//使用Vuex插件
Vue.use(Vuex);
//创建store并暴露Store
export default new Vuex.Store({
    // actions:action,
    // mutations:mutations,
    // state:state
    // 以上简写
    actions,
    mutations,
    state,
});

路由配置(router–index.js)

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import ToDoList from "@/components/ToDoList";
import MyHeader from "@/components/MyHeader";
import TimeBiao from "@/components/TimeBiao";
import PersonInfo from "@/components/PersonInfo";

//创建并暴露一个路由
export default new VueRouter({
    mode:"hash",
    routes:[{path:'/todolist',
             component:ToDoList,
             children:[{path:'myheader',component:MyHeader}]
            },
            {path:'/timebiao',
             component:TimeBiao,
             },
            {path: '/personInfo',component:PersonInfo},
           ]
})

个人信息组件

<template>
<div>
  <h1>我的信息</h1>
  <h3>您的用户名：{{username}}</h3>
  <h3>您的密码：{{password}}</h3>
  <h3>您的名字：{{name}}</h3>
</div>
</template>

<script>
import axios from "axios";
export default {
  name: "PersonInfo",
  data(){
    return{
      msg:'666',
      username:'',
      password:'',
      name:'',
    }
  },
  mounted() {
    axios.post('http://localhost:8080/brand-demo/AccountServlet?method=select').then((res)=>{
      this.username=res.data.username;
      this.password=res.data.password;
      this.name=res.data.name;
    }
    ).catch((err)=>{
      this.msg='error'
      console.log(err)})
  }
}
</script>

<style scoped>

</style>

代码下载地址