node+express+vue搭建工程

Mr_houzi 发布于2019-08-26 13:31 / 1933人阅读

摘要：安装环境度娘创建前端项目创建基于搭建项目收发请求请求第三方准备模块引入使用设置请求头地址获取的参数是字符串转整数接口数据请求成功接口数据返回数据请求获取请求需要模块准备使用

1、安装node环境（度娘）
2、vue-cli创建前端项目
3、创建node

基于[http://www.expressjs.com.cn/][1]搭建node项目

4、node收发请求

get请求第三方api：

准备：request模块

   1、 npm install request --save-dev
   2、 app.js 引入 var request = require("request");

使用：

   var options = {
       url: "",
       headers: {//设置请求头
           "content-type": "application/json"
       }, 
       json: true
   };
   app.get("/jobs", function (req, res, next) {
  
       var proxy_url = "api地址";
       options.url = proxy_url;
       var status = +req.query.status // 获取url?id= 的参数 +是字符串转整数
       function callback(error, response, data) {
           // console.log("------接口数据------",data);
           if (!error && response.statusCode == 200) { // 请求成功
               // console.log("------接口数据------",data);
               let obj = {
                   code: 0,
                   message: "ok",
                   data: data.filter(item => {return item.status === status})
               }
               res.json(obj); // 返回数据
           }
       }
       request(options,callback)
   })

post请求

   获取post请求需要模块：body-parser
   准备： npm install body-parser--save-dev
   使用：app.use(bodyParser.urlencoded({extended: false}));
   
   app.post("/addApplication", function(req, res, next) {
       let params = req.body; // 获取post请求参数
       // 连接数据库
       var  addSql = "INSERT INTO table_name(name,ip,business,priority) VALUES(?,?,?,?)";
       var  addSqlParams = [params.name,params.ip.join(","),params.business,params.priority];
       //增
       connection.query(addSql,addSqlParams,function (err, result) {
           if(err){
               console.log("[INSERT ERROR] - ",err.message);
               let obj = {
                   code: 1,
                   message: err.message
               }
               res.json(obj);
               return;
           }        
           let obj = {
               code: 0,
               message: "ok",
               data: result
           }
           res.json(obj);
       });
  })

5、连接mySql数据库

准备：npm install mysql --save-dev
使用：var mysql = require("mysql")
     var connection = mysql.createConnection({
        host     : "",
        user     : "",
        password : "",
        database : ""
     });
     connection.connect();
     参见步骤4，完成数据增、删、改、查功能

6、node 加载静态资源

利用 Express 托管静态文件
准备：1、引入path var path = require("path")
      2、app.use(express.static(path.join(__dirname, "static")))
      "static" 是需要引入静态资源的文件夹，包括index.html，css，js, image等静态资源

私有云 GPU服务器 Vue+Express Node_Express node_express数据库 webrtc node 搭建

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108963.html

vue+node+mysql搭建个人博客（一）

摘要：其中用来完成请求，将添加的原型上后就不需要再在每个需要使用它的页面引入了每个页面都相当于一个组件，文件以结尾，第一次启动成功时看到的页面就是组件，路径。学习笔记...在线地址：cl8023.com github 数据库已改为mongodb 快速搭建 node 后端服务Github-quick-node-server 准备工作安装node，这是必须的新版node自带npm...

peixn 2019-08-21 17:48 评论0 收藏0
webpack4.x升级摘要

摘要：以为例，编写来帮助我们完成重复的工作编译压缩我只要执行一下就可以检测到文件的变化，然后为你执行一系列的自动化操作，同样的操作也发生在这些的预处理器上。的使用是针对第三方类库使用各种模块化写法以及语法。 showImg(https://segmentfault.com/img/bVbtZYK); 一：前端工程化的发展很久以前，互联网行业有个职位叫做软件开发工程师在那个时代，大家可能...

levinit 2019-08-23 18:11 评论0 收藏0
multipages-generator今日发布?！妈妈再也不用担心移动端h5网站搭建了！

摘要：本文适合的读者现在在手淘，京东，今日头条，美柚等过亿用户的手机中的，都常见网页，他们有更新快，灵活，便于分享和传播的特性。这里有他们中的几个的例子手淘，美柚。本文适合的读者?‍?‍?‍? 现在在手淘，京东，今日头条，美柚等过亿用户的手机app中的，都常见h5网页，他们有更新快，灵活，便于分享和传播的特性。这里有他们中的几个h5的例子：（手淘，美柚）。这些app中都嵌者数以百计，千计的...

xavier 2019-08-02 10:04 评论0 收藏0
multipages-generator今日发布?！妈妈再也不用担心移动端h5网站搭建了！

摘要：本文适合的读者现在在手淘，京东，今日头条，美柚等过亿用户的手机中的，都常见网页，他们有更新快，灵活，便于分享和传播的特性。这里有他们中的几个的例子手淘，美柚。本文适合的读者?‍?‍?‍? 现在在手淘，京东，今日头条，美柚等过亿用户的手机app中的，都常见h5网页，他们有更新快，灵活，便于分享和传播的特性。这里有他们中的几个h5的例子：（手淘，美柚）。这些app中都嵌者数以百计，千计的...

Kerr1Gan 2019-08-30 14:19 评论0 收藏0