Vue前端的搭建(与后端JavaEE的连接)

目录

• 前端平台搭建(Vue2.6,App:HBulderX)
  • 创建Vue2.6项目
  • 下载相应插件方便开发
    • 路由配置
    • 对连接后端进行一些配置(main.js文件)
      • 导入ElementUI组件
      • 组件 | Element
      • 同步与异步
      • axios异步请求框架

前端平台搭建(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异步请求框架

1. axios 是一个 HTTP 的网络请求库. 安装 npm install axios
2. 在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){
    
}

具体配置如下

到此基本配置完毕,那我们进行简单一个界面展示一下

大功告成!!!