前端第一篇

内容管理系统系列之博客管理系统

1、博客管理项目概述实现PC端和手机端的博客管理创建

2、不多说了，直接上代码~~~~~

1、技术栈：前端：VUE+element ui; 后端：Node+Egg+Nunjucks

2、先搭建前端：之前的vue-cli等一步跳过，直接进入创建，首先vue create demo来创建一个文件夹进行创建

这个地方注意依赖的安装，安装完成后直接下载安装element ui 和axios过后进行数据的传递

3、好了，前期的工作都完成了。下面是真正上代码了

在main.js文件中把配置配置好，不然一会儿猛起来的时候啥都忘了

4、配置完成了，写个模板页的组件，这样好看点，直接上element ui，这操作是爽

5、同样创建的blog组件中页直接上element ui

至于里面的代码的意义，这个element ui上都有哈，直接搜就行

6、代码中的<script>标签下是进行一些数据的传入，方法的定义

7、然后就是在router中的路径引入了，可别到时候跳转不了就尴尬了

8、好了，都弄完了，直接服务器启动一下子看看

可以启动，大家可别学我最后启动服务器，我只是总结一下，为了节约时间才这样，做完一步启动一下看看，也能够知道自己在那错了

9、前端最后一步了哈，优化

路径可以通过生产环境和开发环境来优化

10、好了，前端基本先暂告一段落了，进行后端的搭建

11、同样各种依赖导入一下，egg框架的搭建官网有，nunjucks直接命令下载，然后再config文件夹下进行设置，这个地方一定要有数据库的连接，不然没有数据库里的数据啥也没有那就尴尬了，数据库的安装可能也是一个小困难，但是坚持下去，都可以解决

12、配置都搭建好了，直接上代码，开始之前了解一下MVC的设计模式

13、在model文件下创建数据库中的表的模型，然后再创建app.js来在数据库中生成表，启动服务器，运行成功，好数据库创建好了

数据库中有数据就好办了。下面就是把数据库中数据给拿出来然页面显示出来

14、数据是怎出来的通过service来获取到数据然后控制器调用显示给页面，这个地方要注意，路径的引入是关键

15、数据是拿出来了怎末让它显示在页面这个时候nunjucks模板引擎上场了，views文件夹下来写html通过nunjucks模板引擎语法就可以让数据显示在页面了，从而达到动态编辑页面的效果。

16、大体上就是这样了，第一次写的文章，还有好多要提高的地方，还有好多要好好修改的地方，自己也要即将踏入这个行业，未来可期！！！