- 后端创建一个Spring Initializr项目,选择web环境就OK。
- 前端创建一个Vue项目,建议用命令行的方式创建完之后,用idea打开吧
动手操作之前,我跟大家科普一下 “前后端分离” , “单页面应用” 。
前后端分离:前端页面通过 ajax 调用后端的 restuful api 进行数据交互。我在知乎上看到了一个比较好的解释是这样的:如果前端和后端只通过简单的 API 文档就能进行数据交流,就说明他们的逻辑是分离的。我们可以称之为「前后端代码分离」
单页面应用(single page web application,SPA):只有一张页面,并在用户与应用程序交互时动态更新该页面的 Web 应用程序。
这里我们着重讲一下前端项目的创建方法吧,后端创建有问题,欢迎提问哦。
- 安装Node.js,查看Node.js版本:node -v
- 之后用cnpm代替npm(国内库,访问更快),安装命令:
npm install -g cnpm --registry=https://registry.npm.taobao.org
或者(新):npm install -g @vue/cli
- 安装脚手架
cnpm install -g vue-cli
- 创建我们的工作文件夹的位置,这里我放在了e盘里,这里我就省略创建文件夹的步骤了。
- 跳到工作区的路径之后,初始化我创建的webpack文件夹中llsleader-vue工程,命令:
vue init webpack llsleader-vue
- 之后等他安装好,运行,指令:
npm run dev
- 访问一下:
http://localhost:端口号
小白白的是这个:
我们来看一下前端工程的文件结构:
看一下我们的index.html文件
大家看一下我箭头指的地方,之后我们所有显示的内容都会在这两个<div></div>
中。这也是我之前在百度百科给大家找的什么是单页面应用的解释。
OK,讲到这里,我们所有的前端,后端的环境基本都配置完了。前后端的交互,进行方案的选型,这也是一个值得思考的问题。
下一篇文章,我们一起学习一下前后端的交互,开始访问我们的后端!奥利给!咱们下期再见!