用Express搭建服务器

之前一直是用axios请求rap2模拟的接口，想试着用express自己写一个简单的，然后连下MySQL数据库。

0、准备工作

• 安装node
• 初始化项目：新建一个文件夹，在里面

  npm init -y 
          
  
  
              
  
                  1
              
  
          
  

• 安装express

  npm install express 
          
  
  
              
  
                  1
              
  
          
  

1、第一个小栗子（发布服务）Express 中文网

• 新建www.js文件，把这段代码写进去，然后直接node www.js启动服务，然后在浏览器访问http://localhost:3000就可以看到后端返回的Hello World!啦。

   const express = require('express') const app = express() const port = 3000 app.get('/', (req, res) => { //这里面可以先从数据库获取数据，然后返回给前端 res.send('Hello World!') }) app.listen(port, () => { console.log(`Example app listening at http://localhost:${port}`) }) 
          
  
  
              
  
                  1
              
  
              
  
                  2
              
  
              
  
                  3
              
  
              
  
                  4
              
  
              
  
                  5
              
  
              
  
                  6
              
  
              
  
                  7
              
  
              
  
                  8
              
  
              
  
                  9
              
  
              
  
                  10
              
  
              
  
                  11
              
  
              
  
                  12
              
  
              
  
                  13
              
  
          
  

2、前端axios.get请求

• 发布服务之后就可以用axios请求啦，请求的代码如下：（但是会有问题，解决方法见 第3节）

   axios.get('http://localhost:3000').then((res) => { console.log(res); }); 
          
  
  
              
  
                  1
              
  
              
  
                  2
              
  
              
  
                  3
              
  
              
  
                  4
              
  
          
  

3、前端axios.get请求的跨域问题

• 第2节介绍了如何用axios请求后台服务，但是在本地访问上面的http://localhost:3000，如果不是同一端口的话会出现跨域不能请求的问题。解决方法是在www.js文件中加上下面这段：

 //加了这句之后就可以跨域请求了？？？ app.use(function (req, res, next) { res.header('Access-Control-Allow-Origin', '*'); //允许所有来源访问 res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS'); //允许访问的方式 next(); }); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

• 这样你就可以在本地其他端口的项目上访问3000端口啦

4、后端post接口

app.post('/post', (req, res) => { console.log(JSON.stringify(req.body));//前端发送给后端的数据 res.send('ok');//返回给前端的数据 }); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

5、前端axios.post请求

 axios.post(`http://localhost:3000/post`, "向后端发送的数据").then(res => { console.log("后端返回的数据res=>", res); }); 


    

        1
    

    

        2
    

    

        3
    

• 这样你在前端就可以向后端发送请求信息，后端接收并验证之后再把数据返回给前端就好了。
• 但是，这样还是会有点问题，第6节解决。

6、 在express中获取post请求数据（本节原文链接）

1. express没有内置的POST请求API，但是有听说将body-parser（详情） 内置到express中了。但是我试了直接使用不了。所以还是直接安装第三方包

2. 使用第三方包body-parser

   npm i body-parser 
           
   
   
               
   
                   1
               
   
           
   

3. app.js

   //1引包 const bodyParser=require('body-parser') //2配置 // 配置模板引擎和 body-parser 一定要在 app.use(router) 挂载路由之前 // parse application/x-www-form-urlencoded app.use(bodyParser.urlencoded({ extended: false })) // parse application/json app.use(bodyParser.json()) 
           
   
   
               
   
                   1
               
   
               
   
                   2
               
   
               
   
                   3
               
   
               
   
                   4
               
   
               
   
                   5
               
   
               
   
                   6
               
   
               
   
                   7
               
   
               
   
                   8
               
   
               
   
                   9
               
   
           
   

• 至此使用express搭建的简易服务器就好了，后续可以再连接数据库进行增删查改。

转载整合自（文中链接） 参考链接：
Express 中文网
在express中获取post请求数据（原文链接）
body-parser（详情）

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

转自：csdn
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

1.准备工作:npm下载相关包

1.1初始化npm得到package.json文件 (不初始化也可以之前初始化的文件获得package.json文件)

npm init --yes

1.2 express包   

npm i express 

1.3 multer 包

npm i multer

2.创建server文件:在同级文件夹下创建server文件(文件名可以自定义)

3.登录接口部分

 3.1 登录接口代码

    


        


            


            

        

        


            

                const express = require('express')
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                //将这个express的方法赋值给app
            

        

    

    


        


            


            

        

        


            

                const app = express()
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                //引入multer这个包
            

        

    

    


        


            


            

        

        


            

                const multer = require('multer')
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                //上传的文件会保存在这个目录下
            

        

    

    


        


            


            

        

        


            

                const upload = multer({ dest: 'uploads/' })
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                //使用中间件
            

        

    

    


        


            


            

        

        


            

                app.use(express.urlencoded());
            

        

    

    


        


            


            

        

        


            

                app.use(express.json());
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                //登录接口
            

        

    

    


        


            


            

        

        


            

                app.post('/api/login', (req, res) => {
            

        

    

    


        


            


            

        

        


            

                if (req.body.username && req.body.password) {
            

        

    

    


        


            


            

        

        


            

                res.json({
            

        

    

    


        


            


            

        

        


            

                "status": 0,
            

        

    

    


        


            


            

        

        


            

                "message": "登录成功",
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            

                // res.send(req.body)
            

        

    

    


        


            


            

        

        


            

                console.log('req.body', req.body)
            

        

    

    


        


            


            

        

        


            

                } else {
            

        

    

    


        


            


            

        

        


            

                res.json({
            

        

    

    


        


            


            

        

        


            

                "status": 1,
            

        

    

    


        


            


            

        

        


            

                "message": "登录失败",
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            

                // res.send(req.body)
            

        

    

    


        


            


            

        

        


            

                console.log('req.body', req.body)
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                // res.send()
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                app.listen(8023, () => {
            

        

    

    


        


            


            

        

        


            

                console.log('8023端口运行成功,已经跑起来了...');
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

3.2 终端运行代码

 3.3 在Postman中测试发送请求,填写必要参数返回结果:

3.4  在Postman中测试发送请求,不填写必要参数返回结果:

4. 获取接口部分:

4.1  获取接口代码

    


        


            


            

        

        


            

                //引入express框架 
            

        

    

    


        


            


            

        

        


            

                const express = require('express')
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                //将这个express的方法赋值给app
            

        

    

    


        


            


            

        

        


            

                const app = express()
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                //引入multer这个包
            

        

    

    


        


            


            

        

        


            

                const multer = require('multer')
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                //上传的文件会保存在这个目录下
            

        

    

    


        


            


            

        

        


            

                const upload = multer({ dest: 'uploads/' })
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                //使用中间件
            

        

    

    


        


            


            

        

        


            

                app.use(express.urlencoded());
            

        

    

    


        


            


            

        

        


            

                app.use(express.json());
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                //获取接口
            

        

    

    


        


            


            

        

        


            

                app.get('/my/user/userinfo', (req, res) => {
            

        

    

    


        


            


            

        

        


            

                if (req.body.Authorization) {
            

        

    

    


        


            


            

        

        


            

                res.json({
            

        

    

    


        


            


            

        

        


            

                "status": 0,
            

        

    

    


        


            


            

        

        


            

                "message": "获取成功",
            

        

    

    


        


            


            

        

        


            

                "data": {
            

        

    

    


        


            


            

        

        


            

                "id": 1,
            

        

    

    


        


            


            

        

        


            

                "username": "leopard",
            

        

    

    


        


            


            

        

        


            

                "nickname": "little-leopard",
            

        

    

    


        


            


            

        

        


            

                "email": "laotang@qq.com",
            

        

    

    


        


            


            

        

        


            

                "user_pic": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAe"
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            

                console.log('req.body', req.body)
            

        

    

    


        


            


            

        

        


            

                } else {
            

        

    

    


        


            


            

        

        


            

                res.json({
            

        

    

    


        


            


            

        

        


            

                "status": 1,
            

        

    

    


        


            


            

        

        


            

                "message": "获取失败",
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            

                console.log('req.body', req.body)
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                app.listen(8023, () => {
            

        

    

    


        


            


            

        

        


            

                console.log('8023端口运行成功,已经跑起来了...');
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

4.2 在终端运行

4.3 在Postman中测试发送请求,填写必要参数返回结果:

4.4 在Postman中测试发送请求,不填写必要参数返回结果:

5.post接口上传图片

 5.1 上传图片代码

    


        


            


            

        

        


            

                //引入express框架 
            

        

    

    


        


            


            

        

        


            

                const express = require('express')
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                //将这个express的方法赋值给app
            

        

    

    


        


            


            

        

        


            

                const app = express()
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                //引入multer这个包
            

        

    

    


        


            


            

        

        


            

                const multer = require('multer')
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                //上传的文件会保存在这个目录下
            

        

    

    


        


            


            

        

        


            

                const upload = multer({ dest: 'uploads/' })
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                //使用中间件
            

        

    

    


        


            


            

        

        


            

                app.use(express.urlencoded());
            

        

    

    


        


            


            

        

        


            

                app.use(express.json());
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                app.post('/my/user/avatar', upload.single('avatar'), (req, res) => {
            

        

    

    


        


            


            

        

        


            

                console.log(req.file);
            

        

    

    


        


            


            

        

        


            

                if (req.file) {
            

        

    

    


        


            


            

        

        


            

                res.json({
            

        

    

    


        


            


            

        

        


            

                "status": 0,
            

        

    

    


        


            


            

        

        


            

                "message": "上传图片成功"
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            

                console.log('req.body', req.body)
            

        

    

    


        


            


            

        

        


            

                } else {
            

        

    

    


        


            


            

        

        


            

                res.json({
            

        

    

    


        


            


            

        

        


            

                "status": 1,
            

        

    

    


        


            


            

        

        


            

                "message": "上传图片失败"
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            

                console.log('req.body', req.body)
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                app.listen(8023, () => {
            

        

    

    


        


            


            

        

        


            

                console.log('8023端口运行成功,已经跑起来了...');
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

5.2 Postman上传图片测试

 5.3终端查看

分享此文一切功德，皆悉回向给文章原作者及众读者.

转自：csdn
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

npm istall -g express

npm install -g express-generator 

cd /var/www/node
express test && cd test //安装express框架依赖 npm install //启动test这个项目 npm start

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
来源：博客园

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
来源：csdn

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

Node.js 是一个基于 Chrome V8 引擎 的 JavaScript 运行时(即node.js不是一门语言也不是库和框架，它是一个JavaScript运行时环境)。 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js使用事件驱动，非阻塞I/O 模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。

安装node

直接到官网上下载自己电脑的版本，官网地址：https://nodejs.org/zh-cn/
安装完成之后可以通过在终端上运行

 node -v //查看是否安装成功，成功的话会展示当前安装版本 npm -v //安装node的时会连同一起将npm安装包一起打包安装了，npm是nodejs的包管理器 npm install -g cnpm --registry=https://registry.npm.taobao.org //安装淘宝镜像可提高下载包工具的速度 

Express框架

Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。

使用 Express 可以快速地搭建一个完整功能的网站。express 是nodejs的一个web框架，使用express,能够更便捷的使用nodejs.

安装

第一步：安装express

npm install express --save -g 

第二步：安装express-generator

npm install express-generator --save -g //express-generator是express应用生成器，相当于express 的骨架 

第三步：打开终端进入你将要建立项目的文件夹中创建你的项目

express expressDemo //你要建立的项目名称 

第四步：安装:npm install
第五步：启动项目:npm start
这样你的第一个express项目就创建成功了

express-路由

Express框架建立在node.js内置的http模块上。http模块生成服务器的原始代码如下。

var http = require("http"); var app = http.createServer(function(request, response) { response.writeHead(200, {"Content-Type": "text/plain"}); response.end("Hello world!"); }); app.listen(3000, "localhost"); 

上面代码的关键是http模块的createServer方法，表示生成一个HTTP服务器实例。该方法接受一个回调函数，该回调函数的参数，分别为代表HTTP请求和HTTP回应的request对象和response对象。

Express框架的核心是对http模块的再包装。上面的代码用Express改写如下。

var express = require('express'); var app = express(); app.get('/', function (req, res) { res.send('Hello world!'); }); app.listen(3000); 

比较两段代码，可以看到它们非常接近。原来是用http.createServer方法新建一个app实例，现在则是用Express的构造方法，生成一个Epress实例。两者的回调函数都是相同的。Express框架等于在http模块之上，加了一个中间层。

中间件

简单说，中间件（middleware）就是处理HTTP请求的函数。它最大的特点就是，一个中间件处理完，再传递给下一个中间件。App实例在运行过程中，会调用一系列的中间件。

每个中间件可以从App实例，接收三个参数，依次为request对象（代表HTTP请求）、response对象（代表HTTP回应），next回调函数（代表下一个中间件）。每个中间件都可以对HTTP请求（request对象）进行加工，并且决定是否调用next方法，将request对象再传给下一个中间件。
Express 应用程序基本上是一系列中间件函数调用。
中间件函数可以执行以下任务：

• 执行任何代码。
• 对请求和响应对象进行更改。
• 结束请求/响应循环。
• 调用堆栈中的下一个中间件函数。

Express 应用程序可以使用以下类型的中间件：

• 应用层中间件
• 路由器层中间件
• 错误处理中间件
• 内置中间件
• 第三方中间件

应用层中间件
使用 app.use() 和 app.METHOD() 函数将应用层中间件绑定到应用程序对象的实例，其中 METHOD 是中间件函数处理的请求的小写 HTTP 方法（例如 GET、PUT 或 POST）。

app.use('/user/:id', function (req, res, next) { //在 /user/:id 路径中为任何类型的 HTTP 请求执行此函数。 console.log('Request Type:', req.method); next(); }); app.get('/user/:id', function (req, res, next) { res.send('USER'); }); 

路由器层中间件
路由器层中间件的工作方式与应用层中间件基本相同，差异之处在于它绑定到 express.Router() 的实例。

var router = express.Router(); 

错误处理中间件
错误处理中间件函数的定义方式与其他中间件函数基本相同，差别在于错误处理函数有四个自变量而不是三个，专门具有特征符 (err, req, res, next)：

app.use(function(err, req, res, next) { console.error(err.stack); res.status(500).send('Something broke!'); }); 

有关错误处理中间件的详细信息，请参阅：错误处理。

内置中间件
自 V4.x 起，Express 不再依赖于 Connect。除 express.static 外，先前 Express 随附的所有中间件函数现在以单独模块的形式提供。请查看中间件函数的列表。

第三方中间件
使用第三方中间件向 Express 应用程序添加功能。
安装具有所需功能的 Node.js 模块，然后在应用层或路由器层的应用程序中将其加装入。
列如cookie-parser中间件函数
首先安装cookie-parser。 npm install cookie-parser

var express = require('express'); var app = express(); var cookieParser = require('cookie-parser'); // load the cookie-parsing middleware app.use(cookieParser()); 

MongoDB数据库

MongoDB 是一个基于分布式文件存储的数据库。由 C++ 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。
MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。

你可以在mongodb官网下载该安装包，地址为：https://www.mongodb.com/download-center#community。
以下以Mac版本为例讲解

1,打开终端修改环境变量

echo $PATH 

你可以查看到你当前的环境变量下面的文件

image.png

2,选择其中一个文件夹进去然后将你的mongodb的安装包路径映射到此文件上

ln -s 你的MongoDB的安装包路径/bin/mongo mongo 

3，你创建一个数据库存储目录 /data/db：

sudo mkdir -p /data/db 

4,启动 mongodb，默认数据库目录即为 /data/db：

sudo mongod 

5,再打开一个终端执行以下命令连接

mongo 

这样你就启动连接上了本地的数据库
你可以下载安装mongosBooster数据库管理你的数据，地址为https://nosqlbooster.com/downloads

mongoose

mongoose是nodeJS提供连接 mongodb的一个库. 此外还有mongoskin, mongodb(mongodb官方出品). 本人,还是比较青睐mongoose的, 因为他遵循的是一种, 模板式方法, 能够对你输入的数据进行自动处理. 有兴趣的同学可以去Mongoose官网看看.
安装mongoose

npm install mongoose --save 

Mongoose里面有几个基本概念.

• Schema: 相当于一个数据库的模板. Model可以通过mongoose.model 集成其基本属性内容. 当然也可以选择不继承.
• Model: 基本文档数据的父类,通过集成Schema定义的基本方法和属性得到相关的内容.
• instance: 这就是实实在在的数据了. 通过 new Model()初始化得到.
  在保证你已经启动连接上了mongoDB时你就可以使用了，列如以下Demo

const mongoose = require('mongoose'); mongoose.connect('mongodb://localhost:27017/test'); const con = mongoose.connection; con.on('error', console.error.bind(console, '连接数据库失败')); con.once('open',()=>{ //定义一个schema let Schema = mongoose.Schema({ category:String, name:String }); Schema.methods.eat = function(){ console.log("I've eatten one "+this.name); } //继承一个schema let Model = mongoose.model("fruit",Schema); //生成一个document let people = new Model({ category:'apple', name:'apple' }); //存放数据 people.save((err,apple)=>{ if(err) return console.log(err); apple.eat(); //查找数据 Model.find({name:'apple'},(err,data)=>{ console.log(data); }) }); //查询所有数据 people.find(function(err,ret){ if(err){ console.log('查询失败') }else{ console.log('查询成功') } }) //按条件查询符合条件的数据 people.find({},function(err,ret){ }) //按条件查询单个数据 people.findOne({},function(err,ret){ }) //删除数据 people.remove({uesername:'zhangsan'},function(err,ret){ }) //根据ID删除数据 peop.findByIdAndRemove({},function(err,ret){ }) //更新数据 people.findByIdAndUpdate('dfsfs',function(err,ret){ }) }) 

到这里, 实际上, mongoose我们已经就学会了. 剩下就是看一看官方文档的API–CRUD相关操作

作者：orange_9706
来源：简书

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

  蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

Node进行后端开发，Vue进行前端页面的开发，实现了前后端的分离。在开发中使用Express框架可以快速地开发web应用程序。

1.安装node.js

下载对应版本的，网址：https://nodejs.org/en/download/；

进行傻瓜式安装：最后点击install即可；

安装完成后出现完成界面，cmd去命令列界面测试，如图：出现版本号说明安装成功。

如果安装的路径不是默认路径，那么需要执行下面步骤，这样在之后进行一些包的安装时会保存到自定义位置而不是默认盘符。

首先在安装路径下新建两个文件夹【node_global】及【node_cache】，如下：

然后cmd执行命令

    


        


            


            

        

        


            

                npm config set prefix "E:\Program Files\node_js\node_global"
            

        

    

    


        


            


            

        

        


            

                npm config set cache "E:\Program Files\node_js\node_cache"
            

        

    

接着配置环境变量，系统变量里新建：

用户变量里的改为E:\Program Files\node_js\node_global；

最后可以测试一下是否安装到了新的路径里：可以看到成功了

npm install express -g ，其中 -g 表示全局，不加会安装在当前路径C:/users/dell下

2.安装Visual Studio Code

下载：https://code.visualstudio.com/docs/?dv=win；

傻瓜式安装：

3.Visual Studio Code中搭建并运行NodeJS环境

首先安装express npm install express -g和express应用生成器 npm install express-generator -g；

然后打开终端，如图

使用express创建一个项目：express mytest

结果报错：express : 无法加载文件 E:\Program Files\node_js\node_global\express.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/ 
go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
+ express mytest
+ ~~~~~~~
    + CategoryInfo          : SecurityError: (:) []，PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

那就解决错误先：解决方法如图

这样就创建成功了。

这里应该是先新建一个文件夹来存放项目，然后进入指定位置。默认的话就放到c盘了。

测试

在终端执行如下代码

然后浏览器输入http://localhost:3000/

4.创建Vue项目

首先安装webpack、vue脚手架到全局：命令行执行 :npm install webpack -g，npm install vue vue-cli -g

接下来在终端里，进入项目存放文件夹cd 路径，vue init webpack 项目名，创建项目完成，如图；

接下来安装项目依赖，如图；

进入项目，运行项目；

浏览器输入http://localhost:8080进行访问，如下图。

github地址附上：https://vuejs-templates.github.io/webpack

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

部分借鉴自：csdn  作者：狼丶宇先生

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

现在是互联网逐渐发展，已经出现了很多可以供自己写博客的网站，大家可以在上面 发表自己的文章，供自己记录或者是供他人阅读。但是，可不可以自己搭建一个只属于自己的个人博客网站呢？这篇文章就带你从0开始搭建一个自己的个人博客网站，并部署到属于自己服务器。这里有一点要说的是，没有服务器的同学使用自己机器的linux系统也是一样的操作。我们选用一个很好用的博客框架Hexo进行搭建我们的个人博客。

博客框架Hexo介绍：

Hexo是一个快速，简介而且高效的博客框架，Hexo 使用Markdown（或其他渲染引擎）解析文章，在几秒内，即可生成一个静态网页展示我们发布的文章，同时也提供了大量精美的博客主题供我们使用。

Hexo博客框架的优点

• 速度极快：Node.js 所带来的超快生成速度，让上百个页面在几秒内瞬间完成渲染。
• 支持MarkDown：Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。
• 一键部署：只需一条指令即可部署到 GitHub Pages, Heroku 或其他平台。
• 插件和可扩展性：这个也是hexo很强大的一个地方，强大的 API 带来无限的可能，与数种模板引擎（EJS，Pug，Nunjucks）和工具（Babel，PostCSS，Less/Sass）轻易集成

Hexo博客框架搭建：

我们使用Centos7系统作为演示，使用其他linux系统也是可以的，只需要更换为对应Linux版本的软件安装命令即可。

1.安装Git

直接使用yum安装即可，在命令行输入 yum -y install git

完成之后输入git version 查看是否安装成功，如果显示git版本信息即为成功，如下：

2.安装Node.js

Node.js是一种运行在服务端的JavaScript，是一个基于Chrome JavaScript运行时建立的一个平台。

Hexo基于Node.js，所以安装Node.js是必须的一个操作，安装步骤如下：

2.1：下载安装包：

wget https://nodejs.org/dist/v12.13.1/node-v12.13.1-linux-x64.tar.xz  


    

        1
    

2.2：解压缩软件包并配置环境变量：

#解压 tar -xvJf node-v6.10.1-linux-x64.tar.xz #移动到/usl/lcoal目录下 mv node-v6.10.1-linux-x64 /usr/local/node-v6 #创建软链接 ln -s /usr/local/node-v6/bin/node /bin/node ln -s /usr/local/node-v6/bin/npm /bin/npm #添加环境变量 echo 'export PATH=/usr/local/node-v6/bin:$PATH' >> /etc/profile source /etc/profile #让环境变量生效  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

2.3：测试是否安装成功：

在命令行输入node -v 和 npm -v，若是显示出了版本号，即为安装成功：

3.安装并使用Hexo

Hexo的安装较为简单，使用如下命令安装

npm install -g hexo-cli #这里有一点要注意的就是，npm的源是在国外的，访问可能会很慢，这里可以换成我们国内的源进行安装加快速度。操作如下： npm config set registry https://registry.npm.taobao.org  


    

        1
    

    

        2
    

    

        3
    

3.1：初始化Hexo

上面的安装完成之后执行下面的命令进行对Hexo进行一个初始化

#这个文件名字可以自己指定，之后会在当前目录下生成对应文件夹 hexo init <文件名字> cd 文件名字 npm install  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

可以看到安装好之后的一个目录结构：

目录文件说明：

_config.yml：网站的配置信息，您可以在此配置大部分的参数。

package.json：应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装，您可以自由移除。

scaffolds：模版文件夹。当您新建文章时Hexo 会根据 scaffold 来建立文件Hexo的模板是指在新建的文章文件中默认填充的内容。例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。

source：资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

themes：主题 文件夹。Hexo 会根据主题来生成静态页面。

查看hexo的版本以及对应的数据：

3.2生成静态文件，并开启Hexo服务：

进入到了hexo的安装目录之后，使用hexo generate来生成静态文件，也可以使用hexo g，之后使用hexo server（可以写成hexo s）命令启动服务，操作如下：

可以看到4000端口的服务已经开启，之后在你的浏览器输入http://<你的linux机器的ip地址或者服务器公网地址>:4000,如下可以看到最开始的一个界面：

4.初步使用Hexo：

使用前，我们对我们的站点进行一个配置，也就是我们创建的hexo目录的_config.yml文件，可以修改的部分介绍如下：

# Site
title: QIMING.INFO #博客网站的标题
subtitle:          #博客网站的副标题
description:       #你的网站描述
keywords:          #网站的关键词  
author:            #作者的名字
language:          #博客网站使用的语言
timezone:          #网站时区  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

我自己的修改如下供大家参考，这里的修改没有太大的限制：

4.1：开始使用Hexo发布自己的第一篇博客！

执行下面的目录创建一篇新文章：

hexo new post <文章标题>  


    

        1
    

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9Tz5aBlT-1622032930755)(pictures/image-20210526145922392.png)]

这里我创建了一篇标题为First_Blog的博客，创建之后hexo目录下面的source/_post文件夹下会产生一个First_Blog.md的文件

4.2:编辑文章

进入到上面说的那个目录下可以看到我们创建的博客文件：

直接使用vim或者vi就可以对我们的博客文章进行编辑了，打开此First_Blog.md后可以看到—分隔的区域，这部分主要对文章进行标注变量，如下：

title：标题

tage：标签

categories：分类

date：时间

这些标注大家在-----区域可以进行使用

4.3：发布文章

输入如下命令，生成静态网页，静态网页会存放在public文件下

hexo  g
hexo s  


    

        1
    

    

        2
    

之后就可以去浏览器访问了！可以看到我们发布的文章已经成功在浏览器显示，到这里个人博客网站就已经成功搭建了。

5.主题的选择：

主题网站：https://hexo.io/themes/ hexo提供了大量精美的主题供我们选择，选择喜欢的主题，在hexo目录下的themes文件夹下使用git clone下载主题，之后再配置文件_config.yml把theme后面修改成下载的主题的名字，之后运行hexo clean ，hexo g即可看到生效的主题。

将Hexo部署上线到服务器：

如果是有服务器的小伙伴，也可以将Hexo部署到服务器供全网访问，服务器的购买这里就不多说，阿里云跟腾讯云上面对于学生也有较为优惠的价格。部署到服务器的话，就需要将上面的全部操作，在你的服务器系统上面执行，之后我们使用Nginx（反向代理服务器）进行部署。

Nginx安装：

Nginx是一款高性能的 HTTP 和反向代理服务器，这里我们采用编译安装的方式,按照下面的指引依次执行命令

#安装gcc编译环境： yum install -y gcc-c++ #安装zlib-devel库： yum install -y zlib-devel #安装OpenSSL密码库： yum install -y openssl openssl-devel #安装pcre正则表达式库：编译nginx，需要需要指定pcre的路径，这里我们选择安装稳定版本的。 下载地址：https://ftp.pcre.org/pub/pcre/ #选择对应的版本下载下来之后上传到我们的服务器，也可以使用wget直接下载 tar -xf pcre-8.43.tar.gz cd pcre-8.43 mkdir -p /usr/local/pcre
./configure --prefix=/usr/local/pcre make && make install  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

下载编译安装nginx：

nginx下载官网：http://nginx.org/en/download.html wget http://nginx.org/download/nginx-1.16.0.tar.gz mkdir -p /usr/local/nginx tar -xf nginx-1.16.0.tar.gz #编译指定安装路径需要进入nginx cd nginx-1.16.0
./configure --prefix=/usr/local/nginx --with-http_ssl_module --with-http_stub_status_module --with-pcre #http_ssl_module  这是支持https的一个模块，就是可以使用https：//这样去访问。 make && make install #编译安装  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

启动nginx服务：

#启动： /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf #用指定配置文件的方式启动  -c #测试： /usr/local/nginx/sbin/nginx -t #这个用于测试nginx的语法是否有问题 显示is successful即为成功。 #关闭： /usr/local/nginx/sbin/nginx -s stop #继续输入以下命令使Nginx开机自动启动： systemctl enable nginx #配置文件的位置：/usr/local/nginx/conf  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

之后我们需要配置服务器公网ip，编辑配置文件。

之后再重启nginx服务，开启hexo服务，这个时候使用公网的ip就可以访问到我们的hexo服务了！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

部分借鉴自：csdn  

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

现在是互联网逐渐发展，已经出现了很多可以供自己写博客的网站，大家可以在上面 发表自己的文章，供自己记录或者是供他人阅读。但是，可不可以自己搭建一个只属于自己的个人博客网站呢？这篇文章就带你从0开始搭建一个自己的个人博客网站，并部署到属于自己服务器。这里有一点要说的是，没有服务器的同学使用自己机器的linux系统也是一样的操作。我们选用一个很好用的博客框架Hexo进行搭建我们的个人博客。

博客框架Hexo介绍：

Hexo是一个快速，简介而且高效的博客框架，Hexo 使用Markdown（或其他渲染引擎）解析文章，在几秒内，即可生成一个静态网页展示我们发布的文章，同时也提供了大量精美的博客主题供我们使用。

Hexo博客框架的优点

• 速度极快：Node.js 所带来的超快生成速度，让上百个页面在几秒内瞬间完成渲染。
• 支持MarkDown：Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。
• 一键部署：只需一条指令即可部署到 GitHub Pages, Heroku 或其他平台。
• 插件和可扩展性：这个也是hexo很强大的一个地方，强大的 API 带来无限的可能，与数种模板引擎（EJS，Pug，Nunjucks）和工具（Babel，PostCSS，Less/Sass）轻易集成

Hexo博客框架搭建：

我们使用Centos7系统作为演示，使用其他linux系统也是可以的，只需要更换为对应Linux版本的软件安装命令即可。

1.安装Git

直接使用yum安装即可，在命令行输入 yum -y install git

完成之后输入git version 查看是否安装成功，如果显示git版本信息即为成功，如下：

2.安装Node.js

Node.js是一种运行在服务端的JavaScript，是一个基于Chrome JavaScript运行时建立的一个平台。

Hexo基于Node.js，所以安装Node.js是必须的一个操作，安装步骤如下：

2.1：下载安装包：

wget https://nodejs.org/dist/v12.13.1/node-v12.13.1-linux-x64.tar.xz  


    

        1
    

2.2：解压缩软件包并配置环境变量：

#解压 tar -xvJf node-v6.10.1-linux-x64.tar.xz #移动到/usl/lcoal目录下 mv node-v6.10.1-linux-x64 /usr/local/node-v6 #创建软链接 ln -s /usr/local/node-v6/bin/node /bin/node ln -s /usr/local/node-v6/bin/npm /bin/npm #添加环境变量 echo 'export PATH=/usr/local/node-v6/bin:$PATH' >> /etc/profile source /etc/profile #让环境变量生效  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

2.3：测试是否安装成功：

在命令行输入node -v 和 npm -v，若是显示出了版本号，即为安装成功：

3.安装并使用Hexo

Hexo的安装较为简单，使用如下命令安装

npm install -g hexo-cli #这里有一点要注意的就是，npm的源是在国外的，访问可能会很慢，这里可以换成我们国内的源进行安装加快速度。操作如下： npm config set registry https://registry.npm.taobao.org  


    

        1
    

    

        2
    

    

        3
    

3.1：初始化Hexo

上面的安装完成之后执行下面的命令进行对Hexo进行一个初始化

#这个文件名字可以自己指定，之后会在当前目录下生成对应文件夹 hexo init <文件名字> cd 文件名字 npm install  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

可以看到安装好之后的一个目录结构：

目录文件说明：

_config.yml：网站的配置信息，您可以在此配置大部分的参数。

package.json：应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装，您可以自由移除。

scaffolds：模版文件夹。当您新建文章时Hexo 会根据 scaffold 来建立文件Hexo的模板是指在新建的文章文件中默认填充的内容。例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。

source：资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

themes：主题 文件夹。Hexo 会根据主题来生成静态页面。

查看hexo的版本以及对应的数据：

3.2生成静态文件，并开启Hexo服务：

进入到了hexo的安装目录之后，使用hexo generate来生成静态文件，也可以使用hexo g，之后使用hexo server（可以写成hexo s）命令启动服务，操作如下：

可以看到4000端口的服务已经开启，之后在你的浏览器输入http://<你的linux机器的ip地址或者服务器公网地址>:4000,如下可以看到最开始的一个界面：

4.初步使用Hexo：

使用前，我们对我们的站点进行一个配置，也就是我们创建的hexo目录的_config.yml文件，可以修改的部分介绍如下：

# Site
title: QIMING.INFO #博客网站的标题
subtitle:          #博客网站的副标题
description:       #你的网站描述
keywords:          #网站的关键词  
author:            #作者的名字
language:          #博客网站使用的语言
timezone:          #网站时区  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

我自己的修改如下供大家参考，这里的修改没有太大的限制：

4.1：开始使用Hexo发布自己的第一篇博客！

执行下面的目录创建一篇新文章：

hexo new post <文章标题>  


    

        1
    

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9Tz5aBlT-1622032930755)(pictures/image-20210526145922392.png)]

这里我创建了一篇标题为First_Blog的博客，创建之后hexo目录下面的source/_post文件夹下会产生一个First_Blog.md的文件

4.2:编辑文章

进入到上面说的那个目录下可以看到我们创建的博客文件：

直接使用vim或者vi就可以对我们的博客文章进行编辑了，打开此First_Blog.md后可以看到—分隔的区域，这部分主要对文章进行标注变量，如下：

title：标题

tage：标签

categories：分类

date：时间

这些标注大家在-----区域可以进行使用

4.3：发布文章

输入如下命令，生成静态网页，静态网页会存放在public文件下

hexo  g
hexo s  


    

        1
    

    

        2
    

之后就可以去浏览器访问了！可以看到我们发布的文章已经成功在浏览器显示，到这里个人博客网站就已经成功搭建了。

5.主题的选择：

主题网站：https://hexo.io/themes/ hexo提供了大量精美的主题供我们选择，选择喜欢的主题，在hexo目录下的themes文件夹下使用git clone下载主题，之后再配置文件_config.yml把theme后面修改成下载的主题的名字，之后运行hexo clean ，hexo g即可看到生效的主题。

将Hexo部署上线到服务器：

如果是有服务器的小伙伴，也可以将Hexo部署到服务器供全网访问，服务器的购买这里就不多说，阿里云跟腾讯云上面对于学生也有较为优惠的价格。部署到服务器的话，就需要将上面的全部操作，在你的服务器系统上面执行，之后我们使用Nginx（反向代理服务器）进行部署。

Nginx安装：

Nginx是一款高性能的 HTTP 和反向代理服务器，这里我们采用编译安装的方式,按照下面的指引依次执行命令

#安装gcc编译环境： yum install -y gcc-c++ #安装zlib-devel库： yum install -y zlib-devel #安装OpenSSL密码库： yum install -y openssl openssl-devel #安装pcre正则表达式库：编译nginx，需要需要指定pcre的路径，这里我们选择安装稳定版本的。 下载地址：https://ftp.pcre.org/pub/pcre/ #选择对应的版本下载下来之后上传到我们的服务器，也可以使用wget直接下载 tar -xf pcre-8.43.tar.gz cd pcre-8.43 mkdir -p /usr/local/pcre
./configure --prefix=/usr/local/pcre make && make install  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

下载编译安装nginx：

nginx下载官网：http://nginx.org/en/download.html wget http://nginx.org/download/nginx-1.16.0.tar.gz mkdir -p /usr/local/nginx tar -xf nginx-1.16.0.tar.gz #编译指定安装路径需要进入nginx cd nginx-1.16.0
./configure --prefix=/usr/local/nginx --with-http_ssl_module --with-http_stub_status_module --with-pcre #http_ssl_module  这是支持https的一个模块，就是可以使用https：//这样去访问。 make && make install #编译安装  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

启动nginx服务：

#启动： /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf #用指定配置文件的方式启动  -c #测试： /usr/local/nginx/sbin/nginx -t #这个用于测试nginx的语法是否有问题 显示is successful即为成功。 #关闭： /usr/local/nginx/sbin/nginx -s stop #继续输入以下命令使Nginx开机自动启动： systemctl enable nginx #配置文件的位置：/usr/local/nginx/conf  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

之后我们需要配置服务器公网ip，编辑配置文件。

之后再重启nginx服务，开启hexo服务，这个时候使用公网的ip就可以访问到我们的hexo服务了！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：csdn    作者：YO哥教你大数据

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务