本文已参与「新人创作礼」活动，一起开启掘金创作之路
最近在开发一个关于23考研英语真题，政治真题的微信小程序。用的是uniapp 开发的，开发的文章模块，所以记录下来。 项目信息，后端采用的laravel框架+element_amdin后台管理， 前端用的就是uniapp啦。用的是colorui
1. 先看后端管理部分
（1）先看下数据库的设计，简单点
（2）添加添加文章管理的接口路由,分别是文章列表，创建文章，保存文章，删除文章
Route::get('article', 'ArticleController@list')->middleware(['permissions:ArticleList']); //文章列表
Route::post('article', 'ArticleController@create')->middleware(['permissions:ArticleCreate']); //创建文章
Route::post('article/{id}', 'ArticleController@edit')->middleware(['permissions:ArticleEdit']); //保存文章
Route::post('article/destroy/{id}', 'ArticleController@destroy')->middleware(['permissions:ArticleDestroy']); //删除文章
（3）新建article模型
（4）新建article控制器
（5）分别增加增删改查方法
2. 前端接口
（1）添加接口路由，该接口是为小程序端提供数据的。
Route::get('article', 'BannerController@list'); //文章列表
（3）增加控制器，增加方法
3.小程序前端部分
（1）先建个vue页面,/zhengti/index.vue
（2）pages.json要增加页面路径
（3）增加接口article.js文件
（4）article.js接口文件的内容这样写：
（5）index.vue 页面引入接口文件article.js
通过接口获取数据，并将获取的数据赋值给list
methods: {
/**
* 请求数据
*/
async loadData() {
const that = this
await Article.getList({
type:1
},function(res){
that.list = res.data
})
},
}
（6）index.vue页面内容：
这样就可以做成一个列表了，看下效果
（1）列表功能做完了，还差个详情页。在index.vue 增加跳转到详情页的方法
（2）同样，新建详情页detail/index.vue
引用接口文件article.js
import Article from '../../api/article'
Detail/index.vue 页面内容：
记得在onLoad 接收参数id
调用接口
看下效果：
这样，详情页就做好了
总结，总的来说像这种简单的列表功能，并不是很困难的，当然因为简单，所以还有很多东西没有考虑的，只能算作一个简单的demo,后台有时间再慢慢优化完善吧。
