vue制作一个后台登陆界面

下面是一个简单的示例，演示了如何使用Vue.js来创建一个基本的后台登录界面博客。

首先，确保你已经安装了Vue CLI，然后创建一个新的Vue项目：

vue create my-blog-app

然后，进入项目目录并安装一些需要的依赖：

bash

cd my-blog-app
npm install axios vue-router

创建一个登录页面组件 Login.vue：

<template>
  <div>
    <h2>后台登录</h2>
    <form @submit.prevent="login">
      <div>
        <label for="username">用户名:</label>
        <input type="text" id="username" v-model="username" required>
      </div>
      <div>
        <label for="password">密码:</label>
        <input type="password" id="password" v-model="password" required>
      </div>
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    login() {
      axios.post('/api/login', { username: this.username, password: this.password })
        .then(response => {
          if (response.data.success) {
            // 登录成功，跳转到博客管理页面
            this.$router.push('/admin/blog');
          } else {
            // 登录失败，显示错误信息
            alert('登录失败，请检查用户名和密码');
          }
        })
        .catch(error => {
          console.error('登录失败:', error);
          alert('登录失败，请稍后重试');
        });
    }
  }
};
</script>

创建一个博客管理页面组件 AdminBlog.vue：

<template>
  <div>
    <h2>博客管理</h2>
    <!-- 博客列表 -->
    <ul>
      <li v-for="(post, index) in posts" :key="index">
        <h3>{{ post.title }}</h3>
        <p>{{ post.content }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      posts: []
    };
  },
  created() {
    // 在页面加载时获取博客列表
    this.fetchPosts();
  },
  methods: {
    fetchPosts() {
      axios.get('/api/posts')
        .then(response => {
          this.posts = response.data;
        })
        .catch(error => {
          console.error('获取博客列表失败:', error);
          alert('获取博客列表失败，请稍后重试');
        });
    }
  }
};
</script>

然后，配置路由，在 src/router/index.js 中添加：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Login from '../views/Login.vue';
import AdminBlog from '../views/AdminBlog.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/admin/blog',
    name: 'AdminBlog',
    component: AdminBlog,
    meta: { requiresAuth: true } // 需要登录才能访问
  }
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

// 添加路由守卫，检查用户是否登录
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 这个路由需要登录权限
    if (!localStorage.getItem('loggedIn')) {
      // 未登录，跳转到登录页面
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      });
    } else {
      // 已登录，放行
      next();
    }
  } else {
    // 不需要登录权限，直接放行
    next();
  }
});

export default router;

接下来，配置一些假的后端接口，假设登录接口在 /api/login，获取博客列表的接口在 /api/posts。在开发环境中，可以使用
json-server 来模拟这些接口：

首先，安装 json-server：

npm install -g json-server

然后，在项目根目录创建一个 db.json 文件：

{
  "users": [
    { "id": 1, "username": "admin", "password": "admin" }
  ],
  "posts": [
    { "id": 1, "title": "第一篇博客", "content": "这是我的第一篇博客内容。" },
    { "id": 2, "title": "第二篇博客", "content": "这是我的第二篇博客内容。" }
  ]
}

最后，在命令行中启动 json-server：

json-server --watch db.json --port 3001

现在，你可以通过 http://localhost:3001 访问模拟的后端接口了。
最后，在 src/main.js 中，添加 Axios 的配置：

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import axios from 'axios';

Vue.config.productionTip = false;

// 配置axios基本URL
axios.defaults.baseURL = 'http://localhost:3001';

Vue.prototype.$axios = axios;

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

现在你可以启动开发服务器了：

bash

npm run serve

访问 http://localhost:8080，你将看到登录页面。登录成功后，将会跳转到博客管理页面，显示博客列表。

这只是一个简单的示例，实际的应用可能会更加复杂，比如添加用户注册、权限管理、博客编辑等功能。