1、安裝node.js
- 太高版本的win7不支持
這里安裝node-v12.16.2-x64.msi，指定安裝位置后直接按下一步就可以。 - npm是node內(nèi)置的工具
這里配置npm的鏡像cnpm（提高下載速度，以后用到npm的命令都可以用cnpm命令替換）不指定cnpm版本使用如下命令會報錯：
npm install -g cnpm --registry=https://registry.npm.taobao.org
- 錯誤信息：
npm WARN notsup Unsupported engine for npm-normalize-package-bin@3.0.1: wanted:{"node":"^14.17.0 || ^16.13.0 || >=18.0.0"} (current: {"node":"12.16.2","npm":"6.14.4"})
npm WARN notsup Not compatible with your version of node/npm: npm-normalize-package-bin@3.0.1
- 檢查錯誤，參照網(wǎng)上的對應(yīng)版本圖，node12要用cnpm 6版本，輸入如下命令：
npm install -g cnpm@6 --registry=https://registry.npm.taobao.org
- 查看node和npm版本
node -v
npm -v
2、安裝vue-cli腳手架
- vue-cli是在node基礎(chǔ)上構(gòu)建的工具，而vue-cli又可以快速搭建含vue功能的模塊（即模塊化開發(fā)）。安裝vue-cli 3.x腳手架命令如下：
cnpm install @vue/cli -g
- 查看版本
vue -V
3、創(chuàng)建vue項目
vue-cli腳手架創(chuàng)建的是模塊化項目，使用模塊化開發(fā)（.vue后綴的文件為單文件組件，一個文件里封裝了html、js、css代碼）。項目屬于單頁面應(yīng)用（SPA），通過路由跳轉(zhuǎn)鏈接，不利于SEO（爬蟲抓取不到內(nèi)容），可以用Nuxt框架解決該問題（這是后話）。所以說vue比較適合做后臺管理系統(tǒng)。但前端分離的插拔特性，可以讓它方便地切換為移動端瀏覽器、app或小程序。
- 這里有兩種方法創(chuàng)建，第一種是用命令（會在當(dāng)前文件夾下創(chuàng)建文件夾）：
vue create 項目名
- 第二種用UI可視化界面創(chuàng)建：
vue ui
啟動vue可視化工具，會在瀏覽器中打開，創(chuàng)建過項目的需要返回主頁：
選手動配置
點創(chuàng)建即可。
這里不保存預(yù)設(shè)。
等待安裝完，來到歡迎界面就可以就可以關(guān)閉網(wǎng)頁了，后期安裝其它插件我們可以通過命令行執(zhí)行，也很方便。
- 進入項目文件夾下，cmd執(zhí)行命令啟動項目
cd 項目文件夾名
npm run serve
運行后，顯示如下，在瀏覽器中輸入其中一個地址即可看到歡迎界面，說明vue項目成功跑起來了。
4、數(shù)據(jù)交互的準(zhǔn)備工作
這里默認(rèn)你已經(jīng)懂得vue編碼的一些基礎(chǔ)知識，由于縮減篇幅，所以在此只會貼上關(guān)鍵代碼。
前后端分離的項目，要進行數(shù)據(jù)交互，我們使用的是異步請求工具，JS使用的是Ajax，而vue使用的是axios
- 安裝axios插件：
cnpm install axios -S
cnpm i vue-axios -S
5、前后端數(shù)據(jù)交互之前端
前后端人員協(xié)商會有接口文檔，我們以登錄和注冊為例：
- 登錄請求
//發(fā)送get請求 查詢用戶（用post更安全，這里只是舉例使用方法）
this.axios.get("http://localhost:80/api/user/login",{
params:{
"username":username,
"password":password
}
}).then(resp => { //數(shù)據(jù)傳輸成功
//用戶名密碼正確
if(resp.data.data_status === 0){
//路由跳轉(zhuǎn)
router.push("/")
}
else{
//顯示失敗消息，可能是用戶名或密碼錯誤
ElMessage({
message:resp.data.data.message,
duration:1000,
type:"error"
})
}
}).catch(error => { //數(shù)據(jù)傳輸失敗
console.log(error)
})
- 注冊
//訪問后臺保存用戶(注冊)
this.axios.post("http://localhost:80/api/user/register",{
"username":username,
"email":email,
"password":password
}).then(function(response){
//發(fā)送成功，接受返回注冊狀態(tài)信息
if(response.data.data_status === 0){
//注冊成功,路由跳轉(zhuǎn)
router.push("/login")
}
else{
//顯示注冊失敗，用戶已存在
ElMessage({
message:response.data.data.message,
duration:1000,
type:"error"
})
}
}).catch(function(response){
alert("數(shù)據(jù)傳輸失敗")
})
- 注意，這里的data_status、data.message是由后端返回的數(shù)據(jù)決定的，名稱要與后端設(shè)定的返回值一致，可以先用console.log(response)查看一下返回的數(shù)據(jù)。
6、前后端數(shù)據(jù)交互之后端
- GET提交：請求的數(shù)據(jù)會附在URL之后，在地址欄顯示出來；POST提交：把提交的數(shù)據(jù)放置在是 HTTP 包的包體（請求體）中。地址欄不會改變。
- 后端Get不要在參數(shù)加@RequestBody，因為請求是在url里中傳參
Post要在參數(shù)加@RequestBody，因為是在請求體中取值
- 后端登錄
//后端登錄
@GetMapping("/api/user/login")
@ResponseBody//使用ajax時必須加，會把返回類轉(zhuǎn)化為json Get不要加@RequestBody，是在url里中傳參
public CommonResult<Message> loginVue(User user){
//注冊用戶邏輯
int data_status = userService.loginVue(user);
if (data_status == 0) {
return CommonResult.success(Message.createMessage("注冊成功"));
}
//實際開發(fā)中的狀態(tài)碼舉例： 10001 用戶已存在 10002 用戶名或密碼錯誤 20001 商品已存在 。。。
else if(data_status == 2){
return CommonResult.failed(data_status, Message.createMessage("用戶名或密碼錯誤?。。?));
}
else {
return null;
}
}
- 后端注冊
@PostMapping("/api/user/register")
@ResponseBody//使用ajax時必須加，會把返回類轉(zhuǎn)化為json Post要加@RequestBody，是在請求體中取值
public CommonResult<Message> registerVue(@RequestBody User user){
//System.out.println(username);
// System.out.println(user);
//注冊用戶邏輯
int data_status = userService.registerVue(user);
if (data_status == 0) {
return CommonResult.success(Message.createMessage("注冊成功"));
} else {
return CommonResult.failed(data_status, Message.createMessage("用戶名或郵箱已存在，請更改信息?。?！"));
}
}
Get請求不要在參數(shù)前加@RequestBody，Post請求要在參數(shù)前加@RequestBody。重要的事情說三遍！??！
這樣就可以直接使用User user參數(shù)來接受值
- 后端登錄還是注冊都會有返回值，類名可以自定義，但類里的屬性名稱定義要和接口文檔一致，這樣前端接收到對應(yīng)的值。這里我們定義了一個泛型的CommonResult<Message>。
package com.zzz.login_demo.utils;
public class CommonResult<T> {
private Integer data_status;
private T data;
protected CommonResult() {
}
protected CommonResult(int data_status, T data){
this.data_status = data_status;
this.data = data;
}
//返回成功（不帶data信息）
public static CommonResult<Object> success() {
return new CommonResult<Object>(0, null);
}
//返回成功（帶data信息）
public static <T> CommonResult<T> success(T data) {
return new CommonResult<T>(0, data);
}
//返回失敗（帶data信息）
public static <T> CommonResult<T> failed(int data_status, T data) {
return new CommonResult<T>(data_status, data);
}
//get/set...
}
package com.zzz.login_demo.utils;
public class Message {
private String message;
protected Message() {
}
public Message(String message) {
super();
this.message = message;
}
public static Message createMessage(String message) {
return new Message(message);
}
//get/set...
}
- 測試前后端數(shù)據(jù)交互時報錯：Access-Control-Allow-Origin
Access to XMLHttpRequest at 'http://xxx' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
這是跨域請求出錯，可以在前端或后端配置跨域請求。
感覺添加后端配置跨域請求比較方便，在每個Controller類的注解@Contoller的下一行添加注解@CrossOrigin即可。文章來源：http://www.zghlxwxcb.cn/news/detail-857491.html
7、擴展
vue項目如何部署到服務(wù)器？（Nginx）
前端、后端分開開發(fā)時如何模擬用假數(shù)據(jù)測試？（mockjs、postman）
感興趣的童靴可以留言給我，我會安排寫作。文章來源地址http://www.zghlxwxcb.cn/news/detail-857491.html
到了這里，關(guān)于實現(xiàn)vue項目和springboot項目前后端數(shù)據(jù)交互的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
