国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue+node+mysql搭建個(gè)人博客(一)

peixn / 2665人閱讀

摘要:其中用來完成請求,將添加的原型上后就不需要再在每個(gè)需要使用它的頁面引入了每個(gè)頁面都相當(dāng)于一個(gè)組件,文件以結(jié)尾,第一次啟動成功時(shí)看到的頁面就是組件,路徑。

學(xué)習(xí)筆記...
在線地址:cl8023.com github
數(shù)據(jù)庫已改為mongodb

快速搭建 node 后端服務(wù)
Github-quick-node-server

準(zhǔn)備工作 安裝node,這是必須的

新版node自帶npm,安裝Node.js時(shí)會一起安裝,npm的作用就是對Node.js依賴的包進(jìn)行管理,也可以理解為用來安裝/卸載Node.js需要裝的東西。
驗(yàn)證是否安裝成功:

推薦windows下終端工具:cmder

npm安裝vue-cli

使用npm下載依賴包是可能有些慢,所以這里可以換上淘寶的鏡像cnpm。
打開終端(可以在任何位置),輸入
npm install cnpm -g --registry=https://registry.npm.taobao.org
cnpm跟npm用法完全一致,只是在執(zhí)行命令時(shí)將npm改為cnpm。
現(xiàn)在來安裝vue-cli:輸入
npm install -g vue-cli 或者 cnpm install -g vue-cli
命令中 -g 表示全局安裝,會安裝到node安裝目錄下的node_modules文件夾下,看看里面是不是多了vue-cli文件夾,如果沒有,看看npm模塊的安裝路徑
npm config ls
可以查看模塊的安裝路徑 prefix,具體設(shè)置請自行百度。

vue-cli快速構(gòu)建項(xiàng)目

選定一個(gè)你喜歡的文件夾,進(jìn)入該文件夾下,之后創(chuàng)建的項(xiàng)目目錄就在文件夾下

打開終端,進(jìn)入目標(biāo)文件夾,以 D: 為例,使用webpack模板構(gòu)建項(xiàng)目,輸入

vue init webpack my-blog
此時(shí)會自動從github下載文件目錄到目標(biāo)文件夾,上不了github的只能想辦法了,從別處把構(gòu)建好的文件全部拷過來也是可以的。

運(yùn)行項(xiàng)目

1、進(jìn)入my-blog文件夾,首先可以看到文件夾下有一個(gè)package.json文件,這個(gè)文件很重要,里面記錄的項(xiàng)目的一些信息和運(yùn)行成功運(yùn)行項(xiàng)目必須的一些依賴包,之后安裝的一些包也要記錄到里面,方便別人拷貝過來你的項(xiàng)目時(shí)安裝依賴,順利運(yùn)行。

2、新版本的 vue-cli 在執(zhí)行 vue init webpack my-blog 第9步時(shí)會有一個(gè)選擇:

如果選擇了Yes,則可跳過步驟3,如果選擇了No,則按照步驟3進(jìn)入文件夾安裝依賴。

3、終端輸入(要在此文件夾下)輸入:cnpm install install可以簡寫為 i 即 cnpm i,cnpm安裝應(yīng)該挺快的,安裝完成后會看到文件夾下多了個(gè)node_modules文件夾,里面就是運(yùn)行項(xiàng)目所需要的一些依賴包,可以看到此文件夾雖然不大,但是里面文件個(gè)數(shù)有上千個(gè),所以拷貝起來也是挺麻煩的,所以把依賴包記錄到package.json里面,別人只要重新下載安裝一下就好了,上傳到github上也方便。

4、啟動項(xiàng)目:輸入 npm run dev,等待瀏覽器自動打開。
npm run dev 執(zhí)行的命令即是package.json里 scripts下的dev:node build/dev-server.js

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },

默認(rèn)端口為8080,若此時(shí)8080端口被占用則會出錯(cuò)

...
> Starting dev server...
events.js:160
throw er; // Unhandled "error" event
      ^
Error: listen EADDRINUSE :::8080  
.....

可以在D:my-blogconfigindex.js里修改端口

dev: {

    // Paths
    assetsSubDirectory: "static",
    assetsPublicPath: "/",
    proxyTable: {},

    // Various Dev Server settings
    host: "localhost", // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-



    // https://webpack.js.org/configuration/devtool/#development
    devtool: "cheap-module-eval-source-map",

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,

    cssSourceMap: true
  },

啟動成功后:

 ...
 DONE  Compiled successfully in 2597ms                                                          
 I  Your application is running here: http://localhost:8080

安裝需要用到的包

首先安裝項(xiàng)目要用到的一些組件,也可以之后遇到什么需要的再安裝

element-ui:餓了么前段組件庫,可以幫助快速建立起前段頁面,少些很多樣式

vuex:vue狀態(tài)管理

axios:基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端

mysql:連接mysql數(shù)據(jù)庫

express:

body-parser:

node-sass:sass-loader依賴

sass-loader:解析sass/scss文件

可以依次安裝( npm 安裝很慢的可以使用 cnpm ):

npm install element-ui --save  (回車)
npm install vuex --save  (回車)
npm install axios --save  (回車)
npm install mysql --save  (回車)
npm install express --save  (回車)
npm install body-parser --save  (回車)
npm install node-sass --save-dev  (回車)
npm install sass-loader --save-dev  (回車)

也可以一起安裝:

npm install element-ui vuex axios mysql express body-parser --save  (回車)
npm install node-sass sass-loader --save-dev  (回車)

--save 意思就是將依賴記錄在 package.json 里的 dependencies 下,之后生產(chǎn)環(huán)境也是需要這些包的,--sava-dev 是將依賴記錄在 package.json 里的 devDependencies 下,只是開發(fā)環(huán)境需要這些包,方便開發(fā)調(diào)試,而生產(chǎn)環(huán)境不需要。(-S 是 --save 的縮寫,-D 是 --save-dev 的縮寫)

  "dependencies": {
    "axios": "^0.18.0",
    "body-parser": "^1.18.3",
    "element-ui": "^2.3.9",
    "express": "^4.16.3",
    "mysql": "^2.15.0",
    "vue": "^2.5.2",  // 項(xiàng)目構(gòu)建完就有了
    "vue-router": "^3.0.1",  // 項(xiàng)目構(gòu)建完就有了 當(dāng)時(shí)"Install vue-router"選了Yes
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    ...
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.1",
    ...
  },
使用scss/sass前必須先安裝node-sass、sass-loader,否則運(yùn)行npm run dev時(shí)會報(bào)錯(cuò)
調(diào)用后臺接口 ajax 請求數(shù)據(jù)

1、打開入口js文件main.js,引入element-ui組件來搭建頁面 element-ui 查看官網(wǎng)文檔。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from "vue"
import App from "./App"
import router from "./router"
import axios from "axios"
import ElementUI from "element-ui"
import "element-ui/lib/theme-chalk/index.css"

Vue.config.productionTip = false
Vue.use(ElementUI);
Vue.prototype.$http = axios;

/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  components: { App },
  template: ""
})

其中 axios 用來完成 ajax 請求,

import axios from "axios"
axios.get("/", function() {});
axios.post("/", function() {});

// 將 axios 添加的 Vue 原型上后就不需要再在每個(gè)需要使用它的頁面引入了
Vue.prototype.$http = axios;
$http.get("/", function() {});
$http.post("/", function() {});

2、每個(gè)頁面都相當(dāng)于一個(gè)組件,文件以.vue結(jié)尾,第一次啟動成功時(shí)看到的頁面就是組件Hello.vue,路徑src/components/Hello.vue。路由地址在 src/router/index.js 中配置,打開修改我們待會自己要用的:

import Vue from "vue"
import Router from "vue-router"
import HelloWorld from "@/components/HelloWorld"
import Home from "@/components/pages/Home"
import Blog from "@/components/pages/Blog"

Vue.use(Router)

export default new Router({
  routes: [
    // {
    //   path: "/",
    //   name: "HelloWorld",
    //   component: HelloWorld
    // },
    {
      path: "/", // http://localhost:8080/#/
      name: "Home",
      component: Home
    },
    {
      path: "/blog", // http://localhost:8080/#/blog
      name: "Blog",
      component: Blog
    }
  ]
})

上面引入了三個(gè)組件HelloWorld.vue(默認(rèn)),Home.vue,Blog.vue。
path是頁面地址,name可以隨便寫,component 是 import 的組件名。

3、在 scr/components 下新建文件夾 pages,在 pages 下新建文件 Home.vue,Blog.vue,里面按規(guī)則要求寫好內(nèi)容,運(yùn)行工程打開頁面 http://localhost:8080/#/、http://localhost:8080/#/blog 即可看到相應(yīng)的內(nèi)容。
在 Blog.vue 中輸入下面內(nèi)容用來后面測試調(diào)用接口



4、后端使用Express做服務(wù)端提供數(shù)據(jù)接口,不了解的可以先去官網(wǎng)文檔大致了解一下 Express官網(wǎng),在根目錄my-blog下創(chuàng)建文件夾server用來存放后端數(shù)據(jù)庫配置數(shù)據(jù)和相關(guān)方法api。
server文件夾下創(chuàng)建文件:index.js

const path = require("path");
const express = require("express");
const app = express();

app.get("/api/getArticle", (req, res, next) => {
  res.json({
      data: "后臺返回結(jié)果 getArticle"
    })
})

// 監(jiān)聽端口
app.listen(3000);
console.log("success listen at port:3000......");

另開一個(gè) CMD 窗口,進(jìn)入目錄 D:my-blogserver

D:my-blogserver
$ node index.js
success listen at port:3000......

5、打開 http://localhost:8080/#/blog 點(diǎn)擊按鈕"調(diào)用后臺接口",會發(fā)現(xiàn)控制臺報(bào)錯(cuò)

這是因?yàn)槲覀児こ踢\(yùn)行的端口是8080,而后端程序運(yùn)行的端口是3000,所以是跨域請求,要想請求成功,就要先在配置里設(shè)置一下代理

6、打開文件 /config/index.js,將 proxyTable 項(xiàng)設(shè)置如下

proxyTable: {
  "/api": {
    target: "http://localhost:3000/api",
    changeOrigin: true,
    pathRewrite: {
      "^/api": ""
    }
  }
}

"/api": 表示所有以 /api 為開頭的請求,如我們的請求 this.$http.get("/api/getArticle")

target: 將所有以 /api 為開頭請求轉(zhuǎn)發(fā)到 http://localhost:3000/api

changeOrigin: true/false, Default: false,本地會虛擬一個(gè)服務(wù)端接收你的請求并代你發(fā)送該請求(不太明白,false 試了也可以)

pathRewrite: 重寫地址。 "^/api": "" 表示將以 /api 開頭的請求的地址中的 "/api" 替換為 "",
即 path = path.replace(/^/api/, "")
eg: this.$http.get("/api/getArticle")
path = "/api/getArticle"
path = path.replace(/^/api/, "") = "/getArticle"
這樣目標(biāo)請求就變成了 http://localhost:3000/api/getArticle ,
如果不寫 pathRewrite, 請求則為 http://localhost:3000/api/api/getArticle 所以也可以這樣

proxyTable: {
  "/api": {
    target: "http://localhost:3000",
    changeOrigin: true,
  }
}

最后請求同樣轉(zhuǎn)發(fā)為 http://localhost:3000/api/getArticle , 總之要和后臺的接口路徑對應(yīng)上,不過還是建議加上 pathRewrite,方便同類方法調(diào)用

// server/index.js
const path = require("path");
const express = require("express");
const router = express.Router();
const app = express();

app.use("/add", router);
app.use("/del", router);

router.get("/getArticle1", (req, res, next) => {
  api.getArticle(req, res, next);
})
router.get("/getArticle2", (req, res, next) => {
  api.getArticle(req, res, next);
})

router.get("/delArticle1", (req, res, next) => {
  api.getArticle(req, res, next);
})
router.get("/delArticle2", (req, res, next) => {
  api.getArticle(req, res, next);
})

// 監(jiān)聽端口
app.listen(3000);
console.log("success listen at port:3000......");

----------------------------------------------

// congif/index.js
proxyTable: {
  "/add": {
    target: "http://localhost:3000/add",
    changeOrigin: true,
    pathRewrite: {
        "^/add": ""
      }
  },
  "/del": {
    target: "http://localhost:3000/del",
    changeOrigin: true,
    pathRewrite: {
        "^/del": ""
      }
  },
},

7、正確返回?cái)?shù)據(jù)

數(shù)據(jù)庫存取數(shù)據(jù)(Mysql)
Mysql可視化工具我用的是Navicat For Mysql,新建連接,數(shù)據(jù)庫,數(shù)據(jù)表,查詢等都可在其中完成,當(dāng)然熟悉命令的都可以在cmd中命令完成 
Mysql 新建連接

連接數(shù)據(jù)庫

在 src/server 下新建文件 db.js,寫入下面代碼

const mysql = require("mysql");

const mysqlConfig = {
  host: "localhost",  // 新建數(shù)據(jù)庫連接時(shí)的 主機(jī)名或ID地址 內(nèi)容
  user: "root", 
  password: "8023", // root 密碼
  database: "myBlog", // 數(shù)據(jù)庫名
  port: "3306"
}
const pool = mysql.createPool({
  host: mysqlConfig.host,
  user: mysqlConfig.user,
  password: mysqlConfig.password,
  database: mysqlConfig.database,
  port: mysqlConfig.port,
  multipleStatements: true    // 多語句查詢
});

var setValue = function() {
  pool.getConnection((err, connection) => {
    var sql = "INSERT INTO test(id, name) VALUES (1, "blog")"
    connection.query(sql, (err, result) => {
        console.log(result);
        connection.release();
    })
  })
}

setValue();

引入包 mysql,創(chuàng)建連接池 mysql.createPool,sql語法和在命令中使用的形同,拼成字符串即可,在 server 目錄下運(yùn)行 db.js 文件,刷新數(shù)據(jù)庫

同理可增刪查改數(shù)據(jù)

// 查詢數(shù)據(jù),? 的值填入 connection.jquery 的第二個(gè)參數(shù)(數(shù)組)中
// WHERE id = ? AND name = ? ---> connetion.query(sql, [1, "blog"], () => )
var getValue = function() {
  pool.getConnection((err, connection) => {
    var sql = "SELECT * FROM test WHERE id = ?"
    connection.query(sql, [1], (err, result) => {
        console.log(result);
        connection.release();
    })
  })
}
getValue();

/*
$ node db.js
[ RowDataPacket { id: "1", name: "blog" } ]
*/

// 更新數(shù)據(jù)
var updValue = function() {
  pool.getConnection((err, connection) => {
    var sql = "UPDATE test SET name = ? WHERE id = ?"
    connection.query(sql, [22, 1], (err, result) => {
        console.log(result);
        connection.release();
    })
  })
}
updValue();

// 刪除數(shù)據(jù)
var delValue = function() {
  pool.getConnection((err, connection) => {
    var sql = "DELETE FROM test WHERE id = ?"
    connection.query(sql, [1], (err, result) => {
        console.log(result);
        connection.release();
    })
  })
}
delValue();

結(jié)合前面的 ajax 請求數(shù)據(jù),我們便可以輕松的對數(shù)據(jù)庫中的數(shù)據(jù)進(jìn)行操作了,下面來模塊化這些操作。

模塊化后端代碼

在 /server 下創(chuàng)建文件

db.js 數(shù)據(jù)庫連接配置

api.js 連接數(shù)據(jù)庫,各種方法實(shí)現(xiàn)

sqlMap.js sql語句

router.js 后端 express 路由配置

index.js 后端入口文件,啟動后端服務(wù)

1、db.js

// 數(shù)據(jù)庫連接配置
module.exports = {
  mysql: {
    host: "localhost",  // 新建數(shù)據(jù)庫連接時(shí)的 主機(jī)名或ID地址 內(nèi)容
    user: "root", 
    password: "8023", // root 密碼
    database: "myBlog", // 數(shù)據(jù)庫名
    port: "3306"
  }
}

2、api.js

const mysql = require("mysql");
const dbConfig = require("./db");
const sqlMap = require("./sqlMap");

const pool = mysql.createPool({
  host: dbConfig.mysql.host,
  user: dbConfig.mysql.user,
  password: dbConfig.mysql.password,
  database: dbConfig.mysql.database,
  port: dbConfig.mysql.port,
  multipleStatements: true    // 多語句查詢
});

module.exports = {
  getValue(req, res, next) {
    var id = req.query.id;
    pool.getConnection((err, connection) => {
      var sql = sqlMap.getValue;
      connection.query(sql, [id], (err, result) => {
          res.json(result);
          connection.release();
      })
    })
  },
  setValue(req, res, next) {
    console.log(req.body);
    var id = req.body.id, name = req.body.name;
    pool.getConnection((err, connection) => {
      var sql = sqlMap.setValue;
      connection.query(sql, [name, id], (err, result) => {
          res.json(result);
          connection.release();
      })
    })
  }
}

3、sqlMap.js

var sqlMap = {
  getValue: "SELECT * FROM test WHERE id = ?",
  setValue: "UPDATE test SET name = ? WHERE id = ?"
}

module.exports = sqlMap;

4、router.js

const express = require("express");
const router = express.Router();
const api = require("./api");

router.get("/getValue", (req, res, next) => {
  api.getValue(req, res, next);
});

router.post("/setValue", (req, res, next) => {
  api.setValue(req, res, next);
});

module.exports = router;

5、index.js

const routerApi = require("./router");
const bodyParser = require("body-parser"); // post 數(shù)據(jù)是需要
const express = require("express");
const app = express();

app.use(bodyParser.json());

// 后端api路由
app.use("/api", routerApi);

// 監(jiān)聽端口
app.listen(3000);
console.log("success listen at port:3000......");

在 /scr/components/pages/Blog.vue 文件中寫入下面代碼測試



get:第二個(gè)參數(shù)(可選)是一個(gè)對象,以 params 為屬性,將條件數(shù)據(jù)傳到后臺,后臺通過 req.query 可以獲得 params 對應(yīng)的值

post:第二個(gè)參數(shù)(可選)也是一個(gè)對象,屬性任意,將提交數(shù)據(jù)傳到后臺,后臺通過 req.body 可以獲得這個(gè)對象,req.body 數(shù)據(jù)的解析需要用到包 body-parser,在 index.js 中引入 use 即可。

打開兩個(gè)命令窗口分別運(yùn)行工程,運(yùn)行后端服務(wù),即可進(jìn)行測試:

D:my-blog
$ npm run dev
D:my-blogserver
$ node index.js

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/90033.html

相關(guān)文章

  • Node.js + Koa2 + MySQL + Vue.js 實(shí)戰(zhàn)開發(fā)套完整個(gè)人博客項(xiàng)目網(wǎng)站

    摘要:前端打造了前端網(wǎng)站和后臺管理系統(tǒng)。根目錄都是開發(fā)源代碼,根目錄下的文件夾下都是前端網(wǎng)站項(xiàng)目源代碼,根目錄下的文件夾下都是后臺管理系統(tǒng)的源代碼。后臺管理系統(tǒng)使用在根目錄下進(jìn)入項(xiàng)目,安裝包,執(zhí)行命令,啟動服務(wù)瀏覽器打開即可以訪問。 showImg(https://segmentfault.com/img/remote/1460000019603918); 這是個(gè)什么的項(xiàng)目? 使用 Node...

    wangxinarhat 評論0 收藏0
  • vue+express+mysql項(xiàng)目總結(jié)(node項(xiàng)目部署阿里云通用)

    摘要:原文發(fā)布于我的個(gè)人博客上原文點(diǎn)這里前面經(jīng)歷千辛萬苦,終于把博客的所有東西都準(zhǔn)備好了,現(xiàn)在就只等部署了。我的遠(yuǎn)程連接工具是用的是,文件上傳用的是。 原文發(fā)布于我的個(gè)人博客上:原文點(diǎn)這里 ??前面經(jīng)歷千辛萬苦,終于把博客的所有東西都準(zhǔn)備好了,現(xiàn)在就只等部署了。下面我介紹下我的部署過程: 一、購買服務(wù)器和域名 ??如果需要域名(不用域名通過ip也可以訪問,雖然不方便,但可以節(jié)約一年幾十塊錢的...

    charles_paul 評論0 收藏0
  • vue+express+mysql項(xiàng)目總結(jié)(node項(xiàng)目部署阿里云通用)

    摘要:原文發(fā)布于我的個(gè)人博客上原文點(diǎn)這里前面經(jīng)歷千辛萬苦,終于把博客的所有東西都準(zhǔn)備好了,現(xiàn)在就只等部署了。我的遠(yuǎn)程連接工具是用的是,文件上傳用的是。 原文發(fā)布于我的個(gè)人博客上:原文點(diǎn)這里 ??前面經(jīng)歷千辛萬苦,終于把博客的所有東西都準(zhǔn)備好了,現(xiàn)在就只等部署了。下面我介紹下我的部署過程: 一、購買服務(wù)器和域名 ??如果需要域名(不用域名通過ip也可以訪問,雖然不方便,但可以節(jié)約一年幾十塊錢的...

    dreamGong 評論0 收藏0
  • vue+express+mysql項(xiàng)目總結(jié)(node項(xiàng)目部署阿里云通用)

    摘要:原文發(fā)布于我的個(gè)人博客上原文點(diǎn)這里前面經(jīng)歷千辛萬苦,終于把博客的所有東西都準(zhǔn)備好了,現(xiàn)在就只等部署了。我的遠(yuǎn)程連接工具是用的是,文件上傳用的是。 原文發(fā)布于我的個(gè)人博客上:原文點(diǎn)這里 ??前面經(jīng)歷千辛萬苦,終于把博客的所有東西都準(zhǔn)備好了,現(xiàn)在就只等部署了。下面我介紹下我的部署過程: 一、購買服務(wù)器和域名 ??如果需要域名(不用域名通過ip也可以訪問,雖然不方便,但可以節(jié)約一年幾十塊錢的...

    newtrek 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<