作為一個前端小學生，在業餘時間鼓搗出了這個部落格的初級系統。
技術棧：(這麼小的系統也許用不到很多框架，主要為了學習，沒有考慮效能等其他方面因素)
前端：bui(不知道為什麼沒使用vue的UI框架，可能當時腦袋了)+vue+vuex+vue-cli+vue- router+axios+vue-quill-editor(富文字編輯器)
後臺：node+express+cors
資料庫：mysql
編輯器(打包工具)：Hbuilder
功能：
實現文章的預覽 、實現新增文章、登入以及儲存登入狀態
前端：
vue-cli(初始化專案)
使用vue-cli(3.x)來初始化專案，安裝教程可以看我這篇部落格。（初始化後的專案結構）
vue-router(路由跳轉)：
這裡使用npm來安裝：npm install vue-router
安裝完成後在src目錄下新建資料夾router=>index.js(來管理路由)
這裡的mode和base配置是我專案的配置，這個結合自己情況配置。
接下來清空components資料夾下vue檔案，同時建立自己的vue檔案。
axios(後臺資料互動)
安裝：npm install axios
在src下新建資料夾request(自己命名)，在資料夾下新建axios.js(封裝axios)和api.js
import axios from 'axios';
axios.defaults.baseURL = '介面的地址';
axios.defaults.timeout ='響應時間自己設定';
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
/*新增request攔截器*/
axios.interceptors.request.use(function (config) {
// 在傳送請求之前做些什麼
return config;
}, function (error) {
// 對請求錯誤做些什麼
return Promise.reject(error);
});
/*新增response攔截器*/
axios.interceptors.response.use(function (response) {
return response;
}, function (error) {
return Promise.reject(error);
});
/*get方法*/
export function get(url, params){
return new Promise((resolve, reject) =>{
axios.get(url, {
params: params
})
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
});
}
/**
* post方法，對應post請求
*/
export function post(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, params)
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
});
}
複製程式碼api.js（這裡就寫一個介面）
import {get,post} from './axios'
/*登入*/
export const logins= p=>post('./login',p)
複製程式碼使用：
import {logins} from '@/request/api.js' （首先引入）
logins(傳入的引數).then(res=>{res返回的資料}) （放到方法內） 複製程式碼記錄登入狀態（vuex+localStorage）:
安裝 vuex: npm install vuex
實現思路：
1 登入成功後，將使用者名稱以及相關資訊（除了密碼）儲存到localStorage
2 再次進來初始化專案時，先看localStorage中是否有登入資訊，有則將登入資訊利用 vuex進行管理，沒有則調到登入頁面
第一步實現：
if(返回200){
var ress=JSON.stringify(登入資料); //將登入資訊轉為json字串
this.$store.dispatch('increment',ress) //改變vuex的狀態
localStorage.setItem("Flag", ress); //將登入資訊儲存到localStorage
this.$router.push(""); //跳轉
}
複製程式碼第二步實現：
router.beforeEach((to, from, next) => { //vue-router中的導航守衛
store.dispatch('increment',JSON.parse(localStorage.getItem("Flag"))) //將localStorage中的登入資訊載入到vuex中
if (to.matched.some(record => record.meta.isLogin)){ //vue-router中的路由元資訊（meta）來判斷路由跳轉前是否需要驗證
if(store.state.userData[0].id!=undefined){
next();
}else{
next({
path: '/login'
})
}
} else {
next();
}
})複製程式碼後端
搭建專案骨架
在命令列執行
npm install express-generator -g //安裝express
express --view=pug 專案名稱 //建立xxx的Express應用程式
cd 專案
npm install //安裝依賴
npm start //執行複製程式碼專案結構大概是這樣的：
最簡單的方法是裡邊的東西不懂它，直接在routes資料夾下編寫介面
資料庫（mysql）
安裝：npm install mysql
官方文件是這樣使用的：
var mysql = require('mysql');
var connection = mysql.createConnection({
host : 'localhost',
user : 'dbuser',
password : 's3kreee7'
});
connection.connect();
connection.query('SELECT 1 + 1 AS solution', function(err, rows, fields) {
if (err) throw err;
console.log('The solution is: ', rows[0].solution);
});
connection.end();複製程式碼這裡在專案下新建db.js用來封裝資料庫（簡單封裝）
module.exports={
host : '地址',
user : '資料庫使用者名稱',
password : '密碼',
database : '資料庫'
}
//使用
var mysql = require('mysql')
var dbsql=require("../db.js")
router.post('/', function(req, res, next) {
var connection = mysql.createConnection(dbsql)
connection.connect()
connection.query(sql語句,[傳入引數],function (err, rows, fields){
})
connection.end()
});複製程式碼到這裡前端以及後臺都編寫完成，除錯介面的時候回發現後臺介面返回不了資料，前臺報錯，這是因為在請求資料的過程中有跨域問題的存在。
cors(跨域)
cd進後臺所在的資料夾，安裝 npm install cors
使用
在app.js裡邊
var cors=require('cors'); //引入cors
var corsOptions = { //配置cors
"origin": "*",
"methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
"preflightContinue": false,
"optionsSuccessStatus": 204
}
app.use(cors(corsOptions)) //使用cors中介軟體複製程式碼到這，簡單的一個系統就可以完成。
打包（前端）：
在執行打包命令執行，需要配置一下路徑。
在專案根目錄下新建vue.config.js，然後配置(在vue-cli2.0中是不需要新建js檔案的)
module.exports = {
baseUrl:'./'
}複製程式碼不配置，打包完成後專案路徑不對，會報404，出現空白現象。
cd 進專案，執行npm run build命令。
執行完後會在專案中出現dist資料夾。
打包apk檔案(Hbuilder)
1 檔案---->開啟專案---->選中剛才打包的dist資料夾---->命令資料夾名稱（完成之後專案前面有一個W標誌）
2 右擊專案---->轉換成移動app專案（注意專案前面標誌轉換為A標誌）
3 找到專案中的manifest.json（配置資訊的檔案），修改版本號和入口檔案（launch_path） 欄位。launch_path:"可以修改為網路地址 http://電腦ip:埠號"
4 髮型---->打原生安裝包---->生成apk檔案
安裝apk檔案之後，可能開啟使空白，是因為dist打包的檔案需要在伺服器上執行
cd dist資料夾 執行 hs -o -p 自己剛才配置的埠號
如果報hs不是內部命令，需要安裝
npm install http-server -g複製程式碼之後再執行hs -o -p 埠號 就ok啦。（注意這裡手機和電腦要是區域網，否則也會出現空白，404，找不到網址等錯誤。當然也可以架設到外網上。）