banner
NEWS LETTER

2018-08-25-notice-statement

Scroll down

来实现一个简单的公告分发平台,大体就是简单的一对多关系,一个平台对应多个网站,每个网站只有一条公告。

准备

采用我们熟悉的 epxress 框架写后台;

前台尝试使用 element-UI + vue全家桶;

数据交互格式设置为 json;

数据库采用 mysql;

为了一定程度上的保密,经行转码操作;

本文主要参考:手摸手,带你用vue撸后台 系列二(登录权限篇)

开始

由于我自己的服务器已经安装好,如果你是新买的服务器,可以参考以下文章进行配置:抛开宝塔配置node.js服务器

同样可以一步到位,安装宝塔面板之后宝塔安装 node.js 等。

设计

为了快速开发,暂时做的就是简易版。

  1. 首先不是谁都能改公告,应当有登陆界面。

  2. 一张页面用来管理 网站,网站有自己的数据表,只储存 id ip url 三项。

  3. 一张管理公告内容的表,同时来选择每个 公告 对应的 网站的页面,选择公告时可以使用 elementUI 的穿梭框,提升体验。

技术选型

前台

计划使用 vue 全家桶 vue + vue-router + vuex,使用 elemnetUI。

后台

计划使用 express 框架,mysql 数据库,正好可以使用之前封装的 函数。

前台开发

基础配置

我这里使用了 vue 3.0 生成项目模板;

elemnetUI 为 3.0 配置了方便的插件,
运行vue add element 即可快速安装,

安装过程中即可配置 elementUI,由于是 pc 端项目,对网速的要求不高,所以采用全部引入,使用 scss ,使用中文 zh-CN。

登陆页

接着开始登陆页的开发

其他文章
目录导航 置顶
  1. 1. 准备
  2. 2. 开始
  3. 3. 设计
  4. 4. 技术选型
    1. 4.1. 前台
    2. 4.2. 后台
  5. 5. 前台开发
    1. 5.1. 基础配置
    2. 5.2. 登陆页