Vue前端的搭建(与后端JavaEE的连接)
目录
前端平台搭建(Vue2.6
,App:HBulderX
)
创建Vue2.6
项目
如图,创完之后的样子
下载相应插件方便开发
路由配置
组件路由 vue router
是 Vue.js
官方的路由管理器。
它和Vue.js
的核心深度集成,让构建 单页面应用变得易如反掌。
安装 vue-router
是一个插件包,所以我们还是需要用npm来进行安装的。
打开命令行工具,进入你的项目目录,输入下面命令。
npm i vue-router@3.5.3
搭建步骤: 1. 创建router目录 创建index.js
文件,在其中配置路由
import Vue from 'vue';
import router from 'vue-router'; /* 导入路由 */
import login from '../views/login'; /* 导入其他组件 */
import content from '../components/content'; /* 导入其他组件 */
Vue.use(router) /* 定义组件路由 */
var rout = new router({
routes: [ {
path: '/index',
name: 'index',
component: index },{
path: '/content',
component: content }
] }); //导出路由对象 export default rout;
2.使用路由 首页 内容
<rounter-link to="/[pathName]"></rounter>
<router-view></router-view> // 显示组件
3.在main.js 中配置路由
import router from './router/index.js'
Vue.use(router);
new Vue({
el: '#app',
router,
render: h => h(App)
})
4.我们也可以对其进行路由嵌套
{
path: '/main',
component: Main, //路由嵌套 在main下面的嵌套子路由
children:[{
path:"/admin",
component:Admin
}]
}
5.还有对其进行路由守卫(写在index.js目录下) 主要来实现登录功能
rout.beforeEach((to, from, next) => {
if (to.path == '/index') {
// 如果用户访问的登录页, 直接放行
return next();
} else {
var account = window.sessionStorage.getItem("account");
if (account == null) { //用户信息为空,说明用户没有登录
return next("/index");
} else {
return next();
}
}
})
6.展示相应界面
//路由跳转
<router-link to = "[path]"></router-link>
//跳转到[path]界面显示
<router-view></router-view>
path:'/'
表示默认界面为 info.vue
对连接后端进行一些配置(main.js
文件)
导入ElementUI组件
安装指令如下
npm i element-ui-S
ElementUI
组件可以用来快速搭建前端外观
组件 | Element
同步与异步
-
同步:同时只能做一件事
-
同步请求
当前端向后端发送请求时,此时客户端一切操作都会终止,服务器响应回来的内容会覆盖当前网页中的内容,一次只能做一件事,与服务器交互其他操作就不能做了
-
与服务器交互后会覆盖当前界面
-
异步:同时可以做多件事
-
异步请求
当客户端与服务器交互时,不影响客户端页面的其他操作,同时做两件事,
服务器响应回来的内容不会覆盖整个页面
-
axios
异步请求框架
axios
是一个 HTTP 的网络请求库. 安装npm install axios
- 在
main.js
中导入axios
import axios from 'axios';
//设置访问后台服务器地址
axios.defaults.baseURL="http://127.0.0.1:9999/api/";
//将axios挂载到 vue全局对象中,使用this可以直接访问
Vue.prototype.$http=axios;
//使用get或post方法即可发送对应的请求
//then 方法中的回调函数会在请求成功或失败时触发
//通过回调函数的形参可以获取响应内容,或错误信息
//基本语法
this.$http.get("地址?"+Key=value&key2=val1).then(function(response){
}
this.$http.post("login",{key:"value",key2:"val2"}).then(function(response){
}
具体配置如下
到此基本配置完毕,那我们进行简单一个界面展示一下
大功告成!!!
本文来自博客园,作者:Yang0710,转载请注明原文链接:https://www.cnblogs.com/cwyYYDS/p/18223477