使用Express搭建一個服務端簡易實例,使用axios完成請求。 1.什麼是Express? Express 是一個簡潔而靈活的 node.js Web應用框架, 提供了一系列強大特性幫助你創建各種 Web 應用,和豐富的 HTTP 工具。使用 Express 可以快速地搭建一個完整功能的網站。Express 框架核心特性: 可以設置中間件來響應 HTTP 請求。 定義了路由表用於執行不同的 HTTP 請求動作。 可以通過向模板傳遞參數來動態渲染 HTML 頁面。 2.本教程實現什麼? 使用Express框架搭建一個簡單的服務端實例 在vue項目中利用axios請求搭建的服務端 註:該教程必須在node.js環境下 3.開始搭建 1.安裝Express: 首先全局安裝express框架:npm install express -g npm install express-generator -g 2.初始化一個項目:(1)在任意一個地方建立一個文件夾,這裡我隨意起了一個名稱: (2)然後執行命令,初始化express應用:express 項目名稱 (3)然後生成如下目錄: (4)命令行進入該文件夾:cd myexpressdemo (5)安裝依賴: npm install (6)項目目錄簡單介紹:/bin:用來啟動應用(伺服器)/public: 存放靜態資源目錄/routes:路由用於確定應用程序如何響應對特定端點的客戶機請求,包含一個 URI(或路徑)和一個特定的 HTTP 請求方法(GET、POST 等)。每個路由可以具有一個或多個處理程序函數,這些函數在路由匹配時執行。/views: 模板文件所在目錄 文件格式為.jade目錄app.js程序main文件 這個是伺服器啟動的入口3.啟動服務npm start 然後在瀏覽器輸入:http://localhost:3000/,若出現以下界面則啟動成功: 4.編寫基本代碼 1.app.js裡面主要代碼介紹:var createError = require(http-errors); var express = require(express); var path = require(path); var cookieParser = require(cookie-parser); var logger = require(morgan); //路由信息 (介面地址)開始 存放在./routes目錄下 var indexRouter = require(./routes/index);//home page介面 var usersRouter = require(./routes/users);//用戶介面 var app = express(); // view engine setup(模板) app.set(views, path.join(__dirname, views)); app.set(view engine, jade); app.use(logger(dev)); app.use(express.json()); app.use(express.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, public))); app.use(/, indexRouter);//在app中註冊routes該介面 app.use(/users, usersRouter);//在app中註冊users介面 // catch 404 and forward to error handler app.use(function(req, res, next) { next(createError(404)); }); // error handler app.use(function(err, req, res, next) { // set locals, only providing error in development res.locals.message = err.message; res.locals.error = req.app.get(env) === development ? err : {}; // render the error page res.status(err.status || 500); res.render(error); }); module.exports = app; 當我們在瀏覽器中 訪問 http://localhost:3000/ 調用的就是index中的介面我們打開index.js就可以看到該介面的定義:var express = require(express); var router = express.Router(); /* GET home page. */ router.get(/, function(req, res, next) { res.render(index, { title: Express }); }); module.exports = router; 定義一個路由的基本格式為:app.METHOD(PATH, HANDLER) 其中:app 是 express 的實例。METHOD是 HTTP 請求方法。PATH 是伺服器上的路徑。HANDLER 是在路由匹配時執行的函數。 以上的定義代表在根路由 (/) 上(應用程序的主頁)對 GET 請求進行響應:2.實現一個獲取用戶信息介面在routes文件夾下面新建一個user.js文件,並在裡面定義一個User模型: function User(){ this.name; this.city; this.age; } module.exports = User; 然後回到users.js文件,在頭部添加:var URL = require(url); 然後繼續添加其他內容:var express = require(express); var router = express.Router(); var URL = require(url); var User = require(./user) /* GET users listing. */ router.get(/, function(req, res, next) { res.send(respond with a resource); }); router.get(/getUserInfo, function(req,res,next){ var user = new User(); var params = URL.parse(req.url,true).query;//獲取URL參數,使用需要引入require(url); if(params.id == 1){ user.name = "ligh"; user.age = "1"; user.city = "北京市"; }else{ user.name = "SPTING"; user.age = "1"; user.city = "杭州市"; } var response = {status:1,data:user}; res.send(JSON.stringify(response)); }) module.exports = router; 調用方式:http://localhost:3000/users/getUserInfo?id=1或者 http://localhost:3000/users/getUserInfo?id=2 到這裡我們就把獲取用戶信息介面完成了,下面我們在vue項目裡面驗證一下: 5.新建一個vue-cli項目 我的項目結構利用腳手架搭建完成之後是這個樣子: 由於我們只是驗證一下,項目裡面的代碼我們就不給予修改了。然後安裝axios,利用axios來發起請求:npm install axios --save 修改main.js: 然後在app.vue裡面新增一個請求方法: 然後啟動項目:(注意:不要關閉express啟動起來的服務)npm run dev 這裡報錯了,原因是跨域問題,至於跨域問題可以自行百度。我們需要在express項目裡面的app.js裡面新增如下代碼,解決跨域問題://設置允許跨域訪問該服務. app.all(*, function (req, res, next) { res.header(Access-Control-Allow-Origin, *); //Access-Control-Allow-Headers ,可根據瀏覽器的F12查看,把對應的粘貼在這裡就行 res.header(Access-Control-Allow-Headers, Content-Type); res.header(Access-Control-Allow-Methods, *); res.header(Content-Type, application/json;charset=utf-8); next(); }); 最後:需要重啟一下express服務,然後刷新瀏覽器: 這裡看到數據已經成功請求到了,大功告成。 本片文章是由筆者學習的時候參考網上的文章綜合編寫成的,不足之處多多指出。 推薦閱讀: 相關文章 {{#data}} {{title}} {{/data}}