Json-server

JSON-Server 是一个本地json文件服务器，可以指定一个 json 文件作为 api 的数据源。

安装 json-server

npm install -g json-server

查看版本

PS C:\Users\CodeHaywire\Desktop\vue实训\VueProject> json-server -v
0.17.0

新建一个Json文件 在哪都行

{
    "userinfo": [
        {
            "id": 1,
            "username": "admin",
            "password": "123"
        },
        {
            "id": 2,
            "username": "coder",
            "password": "111"
        },
        {
            "id": 3,
            "username": "abc",
            "password": "111"
        }
    ]
}

监听json 在哪新建，就去哪进入cmd

json-server --watch .\login.json

console 启动成功如下

  \{^_^}/ hi!

  Loading .\login.json
  Done

  Resources
  http://localhost:3000/userinfo

  Home
  http://localhost:3000

  Type s + enter at any time to create a snapshot of the database
  Watching...

浏览器访问查看

http://localhost:3000/userinfo

发起axios请求,可正常访问

submitForm() {
            if (this.uname == "") {
                alert("请输入账号");
            } else if (this.upwd == "") {
                alert("请输入密码");
            } else {
                let _this = this;
                this.$axios.get("http://localhost:3000/userinfo").then(
                    function (res) {
                        // console.log(res.data);
                        let flag = false;
                        for (let user of res.data) {
                            if (
                                user.username == _this.uname &&
                                user.password == _this.upwd
                            ) {
                                flag = true;
                            }
                        }
                        if (flag == true) {
                            // alert("合法用户");
                            console.log("合法用户");
                            //保存状态
                            _this.$store.state.loginState = true;
                            _this.$store.state.usernameState = _this.uname;
                            _this.$store.state.passwordState = _this.upwd;
                            //更改路由，跳转
                            _this.$router.push("/manage");
                        } else {
                            // alert("非法用户");
                            console.log("非法用户");
                            _this.resetForm();
                        }
                    },
                    function (err) {}
                );
            }
        },
        resetForm() {
            this.uname = "";
            this.upwd = "";
        },
    },

OVER