运用json-server完成登录页面跳转

创建一个vue项目：

1.vue create 项目名

2.选择一个有路由的

3.转到项目名文件下，并且安装json-server

cd 项目名 

npm install -g json-server

然后查看json-server的版本号看是否安装成功

 创建json数据

 会自动生成默认数据：

我们需要安装jqery

npm i jquery 

我们写一个登录的用户名和密码

登陆页面：

 

<template>
  <div>
    <p><input type="text" placeholder="登录用户名" v-model="username" /></p>
    <p><input type="text" placeholder="登录密码" v-model="password" /></p>

    <button
      style="width: 100px; background: black; color: #fff"
      @click="loginBtn"
    >
      登录
    </button>
  </div>
</template>
  
  <!-- 逻辑层 -->
  <script setup>
import { ref, reactive } from "vue";

//路由
import { useRouter } from "vue-router";
//josn-sever
import $ from "jquery";
//josn-sever
window.jQuery = $;
window.$ = $;
//  声明userRouter方法
const router = useRouter();
const password = ref("");
const username = ref("");
const loginBtn = () => {
  console.log(username.value);
  $.ajax({
    type: "get",
    url: "http://localhost:3000/user",
    success: function (data) {
      console.log(data);
      if (
        data[0].username == username.value &&
        data[0].password == password.value
      ) {
        router.push("/detail");
      } else {
        alert("账号密码错误");
      }
    },
  });
};
</script>
  
  <!-- 样式层 -->
  <style scoped>
</style>

详情页：

<!-- 视图层 -->
<template>
  <div>详情页</div>
</template>

<!-- 逻辑层 -->
<script>
export default {
  name: "",
  components: {},
};
</script>

<!-- 样式层 -->
<style lang="" scoped>
</style>

看看效果：

登录后我们输出一下我们在json-server的数据

 这样一个json-server应用完成了！