ThinkJS ＋ Vue2.0前后端分离多页应用的构建方法

前端

2023-11-14 18:49:10

前言

随着前端技术的发展，前后端分离架构已经成为主流的开发模式。前后端分离架构将前端和后端完全分离，前端负责页面展示和用户交互，后端负责数据处理和业务逻辑。这种架构的好处是前端和后端可以独立开发和维护，提高了开发效率和灵活性。

项目介绍

本项目是一个简单的多页应用，包括用户端和管理界面。用户端主要负责用户注册、登录、文章发布等功能。管理界面主要负责文章管理、用户管理等功能。用户端和管理界面都是基于Vue构建的单页应用，服务端采用ThinkJS框架构建。

项目搭建

1. 搭建服务端

首先，我们需要搭建服务端。可以使用ThinkJS官方提供的脚手架快速搭建服务端。

npm install @thinkjs/cli -g
thinkjs create my-project

执行上述命令后，会在当前目录下创建一个名为my-project的目录。这个目录就是我们的服务端项目。

2. 搭建客户端

服务端搭建完成后，我们需要搭建客户端。可以使用Vue CLI快速搭建客户端。

npm install -g @vue/cli
vue create my-project-client

执行上述命令后，会在当前目录下创建一个名为my-project-client的目录。这个目录就是我们的客户端项目。

3. 配置服务端

在服务端项目中，我们需要配置好路由和控制器。

1）配置路由

在config/route.js文件中，配置好路由规则。

module.exports = [
  ['GET /', 'index/index'],
  ['GET /admin', 'admin/index'],
  ['POST /api/user/register', 'api/user/register'],
  ['POST /api/user/login', 'api/user/login'],
  ['GET /api/article/list', 'api/article/list'],
  ['GET /api/article/detail/:id', 'api/article/detail'],
  ['POST /api/article/add', 'api/article/add'],
  ['PUT /api/article/update/:id', 'api/article/update'],
  ['DELETE /api/article/delete/:id', 'api/article/delete'],
];

2）配置控制器

在controller目录下，创建index、admin、api/user、api/article等控制器。

在index控制器中，编写首页的逻辑。

module.exports = class extends think.Controller {
  async indexAction() {
    const articles = await this.model('article').select();
    this.assign('articles', articles);
    this.display();
  }
};

在admin控制器中，编写管理页面的逻辑。

module.exports = class extends think.Controller {
  async indexAction() {
    const articles = await this.model('article').select();
    this.assign('articles', articles);
    this.display();
  }
};

在api/user控制器中，编写用户相关的逻辑。

module.exports = class extends think.Controller {
  async registerAction() {
    const data = this.post();
    const user = await this.model('user').add(data);
    this.success({id: user.id});
  }

  async loginAction() {
    const data = this.post();
    const user = await this.model('user').where({username: data.username, password: data.password}).find();
    if (think.isEmpty(user)) {
      this.fail('用户名或密码错误');
    } else {
      this.success({id: user.id});
    }
  }
};

在api/article控制器中，编写文章相关的逻辑。

module.exports = class extends think.Controller {
  async listAction() {
    const articles = await this.model('article').select();
    this.success(articles);
  }

  async detailAction() {
    const id = this.get('id');
    const article = await this.model('article').where({id: id}).find();
    this.success(article);
  }

  async addAction() {
    const data = this.post();
    const article = await this.model('article').add(data);
    this.success(article);
  }

  async updateAction() {
    const id = this.get('id');
    const data = this.post();
    const article = await this.model('article').where({id: id}).update(data);
    this.success(article);
  }

  async deleteAction() {
    const id = this.get('id');
    const article = await this.model('article').where({id: id}).delete();
    this.success(article);
  }
};

配置客户端

在客户端项目中，我们需要配置好路由和组件。

1）配置路由

在src/router.js文件中，配置好路由规则。

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: () => import('@/views/index')
    },
    {
      path: '/admin',
      name: 'admin',
      component: () => import('@/views/admin')
    }
  ]
})

2）配置组件

在src/components目录下，创建index、admin等组件。

在index组件中，编写首页的逻辑。

<template>
  <div>
    <div v-for="article in articles" :key="article.id">
      <h1>{{ article.title }}</h1>
      <p>{{ article.content }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      articles: []
    }
  },
  created() {
    this.getArticles()
  },
  methods: {
    async getArticles() {
      const res = await this.$http.get('/api/article/list')
      this.articles = res.data
    }
  }
}
</script>

在admin组件中，编写管理页面的逻辑。

<template>
  <div>
    <div v-for="article in articles" :key="article.id">
      <h1>{{ article.title }}</h1>
      <p>{{ article.content }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      articles: []
    }
  },
  created() {
    this.getArticles()
  },
  methods: {
    async getArticles() {
      const res = await this.$http.get('/api/article/list')
      this.articles = res.data
    }
  }
}
</script>