admin管理员组文章数量:1565797
目录
- 一 所用技术及框架
- 1 前端 vue
- 2 后端 Javaweb Tomcat MySQL
- 二 作品思路
- 三 问题及解决
- 四 作品展示
- 五 作品代码
- 代码下载地址
一 所用技术及框架
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>
代码下载地址
版权声明:本文标题:vue2作品总结(vue+javaweb) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1725663122a1035516.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论