首页 微博热点正文

灭老鼠公司,SpringBoot 和Vue前后端别离入门教程(附源码),韩剧热播网

前端东西和环境:

  • Node.js V10.15.0Vue.js V2.5.21yarn: V1.13.0ID骚文E:VScode

后端东西和环境:

  • Maven: 3.52jdk: 1.8MySql: 14.14IDE: IDEASpring Boot: 2.0+Zookeeper:3.4.13

前后端别离(服务端烘托、浏览器烘托)

完成真实的前后端解耦。

中心思维是前端html页面经过ajax调用后端的restuful api接口并运用json数据进行交互。

前后端别离会为今后的大型分布式架构、弹性核算架构、微服务架构、多端化服务(多种客户端,例如:浏览器,安卓,IOS等等)打下坚实的根底。


Vue.js

在讲Vue之前,需求大约了解下 HTML、CSS、JS是什么?

HTML是写标签的;CSS是写款式的;JS是给网页添加动态效果

Vue介绍

1,Vue是一套用于构建用户界面的渐进式结构,网址:http://cn.vuejs.org/

2,Vue在Github的欢迎度

3,不需求操作Dom,完成了MVVM

// jquery的操作
$("#test3").val("Dolly Duck");
// Vue的操作
MVVM,完成了双向绑定艺电易玩

4,学习成本低,文档深入浅出

Vue 建项目

1,Vue 供给了一个官方的 CLI,为突尼斯气候单页面运用 (SPA) 快速建立冗杂的脚手架。依据Vue cli项目脚手架,网址:http://cli.vuejs.org/zh/guide/

2,运转以下指令其一来创立一个新项目,有默许选默许即可

vue create vue-hello-world (指令行)
vue ui (界面)

3,在创立好项目今后,运转以下指令将能看到初度项目创立的界面

cd vue-老梁故事汇呼兰大侠hello-world 
yarn serve

4,默许情况下,在 浏览器拜访 http://loca灵珠奇缘lhost:8080/ 将能看到如下界面:

Vue 相关结吴正恭构和生命周期介绍

1,目录结构如下图:

2,单个.vue文件的组成部介绍