前端开发如何自己编写接口

190 阅读3分钟

前言

本文档只是个人经验记录总结,如有不对的地方欢迎评论补充。
我相信大部分前端开发人员的工作经验都是从公司项目积累的,可能有的小伙伴也很想自己写一些页面程序练习,但是因为没有接口提供,写出来的东西都是只能本地图一乐,没法放到自己的服务器上去远程展示,所以我总结了两种适合前端自己提供接口的方法(前端框架以vue为例)。

一.mock

mock严格意义上不算是后台应用,只是在本地模拟了调用接口,返回数据的过程。在我们前期搭建一些简易项目时比较好用。

使用方法:

  首先安装mock依赖
      npm i mockjs -S
      
      

在根目录创建mock文件,并在vue.config.js里使用mock数据

image.png 然后在我们独立的js文件里编写自己需要的数据和接口,并在index.js中引用文件,就可以直接调用我们自己提供出来的接口了

image.png

image.png

image.png

缺点

mock模拟的接口在服务器是无法使用的,所以这个只适合在本地先按照调用接口写流程,完成后更改接口就可以直接使用了,可以配合第二种方法

二.node!

不得不说,node对前端开发来说太友好了,因为用的是JavaScript,所以前端学起来非常非常的快,当然,大致看看就够了,其实不需要学什么。

使用方法:

   首先本地得装了node依赖,然后我们可以直接使用基于Node的express框架
   npm i express -S  //安装框架
   npm i express-generator -g -S //搭建模块依赖 不全局安装的话无法使用命令
   express 项目名  //框架初始化 生成基础目录
   
   目录结构
   bin	启动目录 包含一个启动文件 www 默认端口3000(不用)
    node_modules 所有模块的目录
    public	所有前端静态资源  html css image js (打包时才需要使用)
    routes 放的是路由文件                  (最常用到的api接口路由,所有的接口都在这里编写)
    views 主要放置ejs后端模板文件
    app.js 入口文件 总路由                 (用的比较少)
    package.json 包描述文件
    
    使用npm i安装描述文件里的依赖
    
## 使用重点
   因为是后台应用 后边是需要提供接口给前端
       cors   解决跨域问题
	使用:app.js文件
		var cors=require('cors')
		app.use(cors())
       jsonwentoken  解决前端登录需要的token问题
           使用:utils文件夹下新建jwt.js
            const path = require('path')
            const jwt = require("jsonwebtoken");
            const SECRET = "QWERTYUIOPasdfghjklZXCVBNM"
            const secretKey = '&*^R*G&(FRDwp4eg3' //secret
            const expiresIn = 60 * 60 * 24 * 30; //时效 (秒)

            class Jwt {
                //生成jwt
                generateToken(data) {
                        const token = jwt.sign({ data }, secretKey, {
                            expiresIn
                        })
                        return token
                    }
                    //解析jwt
                verifyToken(token) {
                        return jwt.verify(token, secretKey)
                    }
                    //计算剩余时间
                tokenExp(token) {
                    let verify = this.verifyToken(token);
                    let time = parseInt((new Date().getTime()) / 1000);
                    return `剩余${verify.exp - time}秒`
                }

            }


            // let token = generateToken(1);

            // console.log(token); //输出token
            // console.log(verifyToken(token)); //输出token内容
            // tokenExp(token);

            module.exports = Jwt
            
      连接数据库
          在根目录新建conf文件夹,在conf里创建db.js和db.config.js
          db.js
              
              var mysql = require('mysql')
                var dbConfig = require('./db.config')
                module.exports = {
                    query: function(sql, params, callback) {
                        //每次使⽤的时候需要创建链接,数据操作完成之后要关闭连接
                        var connection = mysql.createConnection(dbConfig)
                        connection.connect(function(err) {
                            if (err) {
                                throw err
                            }
                            //开始数据操作
                            connection.query(sql, params, function(err, results) {

                                // connection.query(sql, params, function(err, results, fields) {  fields返回undefined的时候程序会终止 所以暂时取消该参数

                                if (err) {
                                    throw err
                                }
                                //将查询出来的数据返回给回调函数
                                callback &&
                                    callback(
                                        JSON.parse(JSON.stringify(results)),
                                        // JSON.parse(JSON.stringify(fields))
                                    )
                                    //停⽌链接数据库,必须在查询语句后,要不然⼀调⽤这个⽅法,就直接停⽌链接,数据操作就会失败
                                connection.end(function(err) {
                                    if (err) {
                                        console.log('关闭数据库连接失败!')
                                        throw err
                                    }
                                })
                            })
                        })
                    },
                }
                
                
                db.config.js
                
                //创建连接
                module.exports = {
                    host: '', //服务器地址
                    user: '', //用户名
                    password: '', //用户密码
                    port: '3306', //端口
                    database: '', //数据库名称
                }
                
                
                
 ## 追加
     又一个nodeman依赖不错,安装完成后  修改package.json里的start node改为nodeman 可以在每次修改api文件时自动重启,不需要自己反复ctrl c手动重启