新版微服务时代Spring Boot企业微信点餐系统

原创

mb60197f1e1aeae 2021-03-07 02:33:47 ©著作权

©著作权归作者所有：来自51CTO博客作者mb60197f1e1aeae的原创作品，请联系作者获取转载授权，否则将追究法律责任

download：新版微服务时代Spring Boot企业微信点餐系统

迎接微服务时代，SpringBoot是你不得不学之框架，微信点餐系统将带你体验敏捷式开发，最小成本迭代升级，以最小的代价完成旧系统的升级改造，还原企业真实系统重构场景。系统前后端分离的架构，让你更具备互联网工程师的气质，带你一步步设计并开发一个企业级Java应用

适合人群如果你是初入职场或即将进入职场的Java工程师，想深入学习Spring Boot框架，那这门课几乎是你唯一的选择，如果你想用Spring Boot开发一个中小型的Java 企业级应用，那本课程也是你的不二之选技术储备要求 JavaWeb基础 Maven构建项目 SpringBoot基础二、創立登錄頁面把沒有用的初始化東西删掉！

1）在源码目錄中創立如下構造

assets：用於寄存資源文件 components：用於寄存 Vue 功用組件 views：用於寄存 Vue 視圖組件 router：用於寄存 vue-router 配置

2）創立首頁視圖：在 views 目錄下創立一個名爲 Main.vue 的視圖組件

3）創立登錄頁視圖：在 views 目錄下創立一個名爲 Login.vue 的視圖組件，其中 el-… 的元素爲 ElementUI 組件；

4）創立路由：在 router 目錄下創立一個名爲 index.js 的 vue-router 路由配置文件

import Vue from 'vue' // 導入Vue import VueRouter from 'vue-router' // 導入路由 // 導入組件 import Main from "../views/Main" import Login from "../views/Login" // 裝置路由 Vue.use(VueRouter); // 配置路由插件 export default new VueRouter({ /* mode - 路由形式 1)hash:途径帶#號 http://localhost/main#/ 2)history:途径沒有# http://localhost/main */ mode: 'history', routes: [ { /首頁/ path: '/main', name: 'main', component: Main, }, { /登錄頁/ path: '/login', name: 'login', component: Login } ] }) 5）配置路由：修正入口代码，修正 main.js 入口代码

import Vue from 'vue' //Vue組件 import App from './App' //App組件 import VueRouter from 'vue-router' // 路由組件 import router from './router' // 自動掃描配置里面的路由 // 引入 ElementUI 與其 CSS import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; // 裝置路由 Vue.use(VueRouter) Vue.use(ElementUI); new Vue({ el: '#app', router, // 配置路由 render: h => h(App) // 啟用ElementUI }); 6）修正 App.vue 組件代码

7）測試：在阅讀器翻開 http://localhost:8080/#/login

假如呈現錯誤: 可能是由於sass-loader的版本過高招致的編译錯誤，當前最高版本是8.x，需求退回到7.3.1 ；

去package.json文件里面的 "sass-loader"的版本改換成7.3.1，然後重新cnpm install就能夠了；

三、路由嵌套嵌套路由又稱子路由，在實践應用中，通常由多層嵌套的組件組合而成。同樣地，URL 中各段動態途径也按某種構造對應嵌套的各層組件，例如：

/user/foo/profile /user/foo/list +------------------+ +-----------------+ | User | | User | | +--------------+ | | +-------------+ | | | Profile | | +------------> | | list | | | | | | | | | | | +--------------+ | | +-------------+ | +------------------+ +-----------------+ 1）用戶信息組件，在 views/user 目錄下創立一個名爲 Profile.vue 的視圖組件；

2）用戶列表組件，在 views/user 目錄下創立一個名爲 List.vue 的視圖組件；

3）配置嵌套路由修正 router 目錄下的 index.js 路由配置文件，代码如

import Vue from 'vue' // 導入Vue import VueRouter from 'vue-router' // 導入路由 // 導入組件 import Main from "../views/Main" import Login from "../views/Login" import UserList from "../views/user/List" import UserProfile from "../views/user/Profile" // 裝置路由 Vue.use(VueRouter); // 配置路由插件 export default new VueRouter({ mode: 'history', // mode：路由形式 routes: [ { /主頁/ path: '/main', name: 'main', component: Main, children: [ /用戶列表/ {path: '/user/list', component: UserList}, /用戶信息/ {path: '/user/profile', component: UserProfile} ] }, { /登錄頁/ path: '/login', name: 'login', component: Login } ] }) 阐明：主要在路由配置中增加了 children 數組配置，用於在該組件下設置嵌套路由

4）修正首頁視圖，我們修正 Main.vue 視圖組件，此處運用了 ElementUI 規劃容器組件，代码如下：

阐明：在 <el-main> 元素中配置了 <router-view /> 用於展現嵌套路由，主要運用 <router-link to="/user/profile">個人信息展現嵌套路由内容

四、參數傳送我們經常需求把某種形式匹配到的一切路由，全都映射到同個組件。例如，我們有一個 User 組件，關於一切 ID 各不相同的用戶，都要運用這個組件來渲染。此時我們就需求傳送參數了；

修正路由配置，主要是在 path 屬性中增加了 :id 這樣的佔位符

/用戶信息/ {path: '/user/profile/:id', name: 'user_profile', component: UserProfile} 2. 傳送參數

將 to 改爲了 :to，是爲了將這一屬性當成對象運用，留意 router-link 中的 name 屬性稱號一定要和路由中的 name 屬性稱號匹配，由於這樣 Vue 才幹找到對應的路由途径；

<router-link :to="{name:'user_profile',params:{id:888888}}">用戶信息 3. 接纳參數，在目的組件中

用戶ID-1: {{$route.params.id }} 1）運用 props 方式

修正路由配置，主要增加了 props:true 屬性

{path: '/user/profile/:id', name: 'user_profile', component: UserProfile, props: true } 2. 傳送參數和之前一樣

接纳參數爲目的組件增加 props 屬性

2）組件重定向重定向的意義大家都明白，但 Vue 中的重定向是作用在途径不同但組件相同的狀況下，比方：

routes: [ { /首頁/ path: '/main', name: 'main', component: Main, }, { /回到首頁/ path: '/goHome', redirect: '/main' }, ] 阐明：這里定義了兩個途径，一個是 /main ，一個是 /goHome，其中 /goHome 重定向到了 /main 途径，由此能夠看出重定向不需求定義組件；

運用的話，只需求設置對應途径即可；

<router-link to="/goHome">重定向->首頁五、路由形式與404 1）路由形式

路由形式有兩種

hash：途径帶 # 符號，如 http://localhost/#/login history：途径不帶 # 符號，如 http://localhost/login 修正路由配置，代码如下：index.js

export default new Router({ mode: 'history', routes: [ ] }); 2）處置 404

處置 404 創立一個名爲 NotFound.vue 的視圖組件，代码如下：

修正路由配置，代码如下：

import NotFound from '../views/NotFound' { path: '*', component: NotFound } 六、路由钩子與異步懇求 1）钩子函數

beforeRouteEnter：在進入路由前執行 beforeRouteLeave：在分開路由前執行上代码：

export default { props: ['id'], name: "UserProfile", /* 進入路由之前 / beforeRouteEnter: (to, from, next) => { console.log("beforeRouteEnter 11111"); next(); }, / 進入路由之後*/ beforeRouteLeave: (to, from, next) => { console.log("beforeRouteLeave 22222"); next(); } } 參數阐明：

to：路由將要跳轉的途径信息 from：途径跳轉前的途径信息 next：路由的控製參數 next() 跳入下一個頁面 next(’/path’) 改動路由的跳轉方向，使其跳到另一個路由 next(false) 返回原來的頁面 next((vm)=>{}) 僅在 beforeRouteEnter 中可用，vm 是組件實例 2）異步懇求：在钩子函數中運用異步懇求