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来进行安装的。
打开命令行工具，进入你的项目目录，输入下面命令。

1. npm i vue-router@3.5.3

复制代码

搭建步骤: 1. 创建router目录 创建index.js 文件,在其中配置路由

1. import Vue from 'vue';
2. import router from 'vue-router'; /* 导入路由 */
3. import login from '../views/login'; /* 导入其他组件 */
4. import content from '../components/content'; /* 导入其他组件 */
5. Vue.use(router) /* 定义组件路由 */
6. var rout = new router({
7.         routes: [ {
8.         path: '/index',
9.         name: 'index',
10.     component: index },{
11.     path: '/content',
12.     component: content }
13.     ] }); //导出路由对象 export default rout;

复制代码

2.使用路由 首页 内容

1. <rounter-link to="/[pathName]"></rounter>
2. <router-view></router-view> // 显示组件

复制代码

3.在main.js 中配置路由

1. import router from './router/index.js'
2. Vue.use(router);
3. new Vue({
4.         el: '#app',
5.         router,
6.         render: h => h(App)
7. })

复制代码

4.我们也可以对其进行路由嵌套

1. {
2.         path: '/main',
3.         component: Main, //路由嵌套 在main下面的嵌套子路由
4.         children:[{
5.                             path:"/admin",
6.                                  component:Admin
7.         }]
8. }

复制代码

5.还有对其进行路由守卫(写在index.js目录下) 主要来实现登录功能

1. rout.beforeEach((to, from, next) => {
3.         if (to.path == '/index') {
4.                 // 如果用户访问的登录页， 直接放行
5.                 return next();
6.         } else {
8.                 var account = window.sessionStorage.getItem("account");
9.                 if (account == null) { //用户信息为空,说明用户没有登录
10.                         return next("/index");
11.                 } else {
12.                         return next();
13.                 }
14.         }
15. })

复制代码

6.展示相应界面

1. //路由跳转
2. <router-link to = "[path]"></router-link>
3. //跳转到[path]界面显示
4. <router-view></router-view>

复制代码

path:'/'表示默认界面为 info.vue

对连接后端进行一些配置(main.js文件)

导入ElementUI组件

安装指令如下

1. npm i element-ui-S

复制代码

ElementUI        组件可以用来快速搭建前端外观
组件 | Element

同步与异步

• 同步:同时只能做一件事
  
  
  
  • 同步请求
    当前端向后端发送请求时,此时客户端一切操作都会终止,服务器响应回来的内容会覆盖当前网页中的内容,一次只能做一件事,与服务器交互其他操作就不能做了
    
  
  

与服务器交互后会覆盖当前界面

• 异步:同时可以做多件事
  
  
  
  • 异步请求
    当客户端与服务器交互时,不影响客户端页面的其他操作,同时做两件事,
    服务器响应回来的内容不会覆盖整个页面
    
  
  

axios异步请求框架

• axios 是一个 HTTP 的网络请求库. 安装 npm install axios
  
• 在main.js中导入axios
  

1. import axios from 'axios';
2. //设置访问后台服务器地址
3. axios.defaults.baseURL="http://127.0.0.1:9999/api/";
4. //将axios挂载到 vue全局对象中,使用this可以直接访问
5. Vue.prototype.$http=axios;
6. //使用get或post方法即可发送对应的请求
7. //then 方法中的回调函数会在请求成功或失败时触发
8. //通过回调函数的形参可以获取响应内容，或错误信息
10. //基本语法
11. this.$http.get("地址?"+Key=value&key2=val1).then(function(response){
12.    
13. }
14. this.$http.post("login",{key:"value",key2:"val2"}).then(function(response){
15.    
16. }

复制代码

具体配置如下

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

大功告成!!!

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！