springboot&&vue先後端分離入門案例

springboot&&vue先後端分離入門案例

一、最近一直再學習springboot的相關內容，感受暫時不想學了，就上網隨便搜搜，看到你們都在討論的先後端分離，出於好奇，今天也來玩玩。

二、玩先後端分離，有一個前提條件，後端的也就是springboot，就再也不說了，前端的須要有對應的node環境，尚未環境的能夠看個人上一篇教程。下面咱們進入正題：

三、既然是先後端分離項目，那其實他就能夠當成兩個項目進行操做，前端和後端是能夠單獨運行，單獨上線的。

後端部分

效果圖：

目錄結構：

具體的增刪改查，這裏就再也不多說了，跟以前的沒什麼區別。

前端部分

效果圖：

目錄結構

注意：這裏使用了vue的腳手架搭建，腳手架的建立也在上一篇博客裏進行介紹，有須要的能夠參考。
有關目錄裏的個格文件加的含義，上篇博客裏面同樣有解釋，這裏再說一下：

1.建立vue腳手架第一個項目

vue init webpack 項目名

2.建立第一個項目

hello     ------------->項目名
-build  ------------->用來使用webpack打包使用build依賴
-config ------------->用來作整個項目配置目錄
-node_modules  ------>用來管理項目中使用依賴
-src                     ------>用來書寫vue的源代碼[重點]
    +assets      ------>用來存放靜態資源 [重點]
  components   ------>用來書寫Vue組件 [重點]
  router             ------>用來配置項目中路由[重點]
  App.vue      ------>項目中根組件[重點]
  main.js      ------>項目中主入口[重點]
-static        ------>其它靜態
-.babelrc      ------> 將es6語法轉爲es5運行
-.editorconfig ------> 項目編輯配置
-.gitignore    ------> git版本控制忽略文件
-.postcssrc.js ------> 源碼相關js
-index.html    ------> 項目主頁
-package.json  ------> 相似與pom.xml 依賴管理  jquery 不建議手動修改
-package-lock.json ----> 對package.json加鎖
-README.md         ----> 項目說明文件

3.如何運行在項目的根目錄中執行

npm start 運行前端系統

4.如何訪問項目

http://localhost:8081

5.Vue Cli中項目開發方式

注意: 一切皆組件   一個組件中   js代碼  html代碼  css樣式
 
     1. VueCli開發方式是在項目中開發一個一個組件對應一個業務功能模塊,往後能夠將多個組件組合到一塊兒造成一個前端系統
     2. 往後在使用vue Cli進行開發時再也不書寫html,編寫的是一個個組件(組件後綴.vue結尾的文件),往後打包時vue cli會將組件編譯成運行的html文件

簡單介紹一下前端部分，畢竟我也是剛入門，小白一枚，你們不要笑話！謝謝！

在vue裏，一切皆組件。
一、Vue.js是一套構建用戶界面的漸進式框架。與其餘重量級框架不一樣的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，而且很是容易學習，很是容易與其它庫或已有項目整合。另外一方面，Vue 徹底有能力驅動採用單文件組件和Vue生態系統支持的庫開發的複雜單頁應用。
二、Vue.js 的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件 [2] 。
三、Vue.js 自身不是一個全能框架——它只聚焦於視圖層。所以它很是容易學習，很是容易與其它庫或已有項目整合。另外一方面，在與相關工具和支持庫一塊兒使用時 [3] ，Vue.js 也能完美地驅動複雜的單頁應用。

簡單來講，就是，他這裏將每個功能拆分出來，在須要時，方便進行組合使用。

四、他每個展現頁面之間時經過，路由進行鏈接

import Vue from 'vue'
import Router from 'vue-router'
import Home from "../components/Home";
import User from "../components/User";
import Student from "../components/Student";
import UserAdd from "../components/UserAdd";
import UserEdit from "../components/UserEdit";

Vue.use(Router)

export default new Router({
  routes: [
    {path: '/', redirect: '/home'},
    {path: '/home', component: Home},
    {
      path: '/user', component: User,
      children:[
        {path:'add',component:UserAdd}, //用戶添加路由
        {path:'edit',component:UserEdit}, //用戶添加路由
      ]
    },
    {path: '/student', component: Student},
  ]
})

先這樣說。

兩者之間的聯繫

舉個例子：

他這裏是經過直接調用後端的一個接口們直接進行訪問，可是沃爾瑪呢在這裏須要下載安裝一個工具 axios

這裏說一下什麼是 axios：

在使用時，記得加上

Vue.prototype.$http=axios;//修改內部的$http爲axios  $http.get("") .post()

Vue.config.productionTip = false

經過它，更加方便地實現了，前端界面與後端業務邏輯與數據的交互，更加方便了開發。

該篇博客，只是簡單說明一下，不少地方我暫時也不沒明白，先這樣，回頭，整理清楚了，再繼續補上。謝謝！！

個人我的博客：天涯志

個人公衆號：