前后端分离学习笔记 ---[Vue基础]

Posted 小智RE0

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前后端分离学习笔记 ---[Vue基础]相关的知识,希望对你有一定的参考价值。

建议官方文档学习 VUE2.0版本在线文档

1.关于前后端分离

  • 前端 html 页面通过 ajax 调用后端的 restuful api 接口并使用 json数据进行交互.
  • 前端服务器使用 nginx/tomcat。前端/WEB服务器放的是 css,js,图片等等一系列静态资源,前端服务器负责控制页面引用,跳转,路由.
  • 可以减少后端服务器的负载压力,因为分离之后;接口以外的其他所有 http 请求都转移到前端服务器了.
  • 可快速区分问题;后端–>接口数据出错,数据没有提交成功,应答超时…;
    前端—>页面逻辑,跳转错误,浏览器兼容性问题,脚本错误,页面样式问题…
  • 即使后端服务暂时超时或宕机,前端页面也会正常访问.
  • nginx 支持页面热部署,不用重启服务器,前端升级更无缝.
  • 增加代码的维护性和易读性;接口完全可以共用,如果也有手机app 相关的服务,那么只要通过一些代码重构,也可以大量复用接口,提升开发效率.
  • 在 nginx 中部署证书,外网使用 https 访问,并且只开放 443 和 80 端口,其他端口一律关闭(防止黑客端口扫描),内网使用 http,性能和安全都有保障

MVVM结构

2. vue基本学习

用于构建用户界面的渐进式框架. 与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库;它只关注视图层;
基本学习的话建议看着官方文档跟随学习;—> VUE2.0版本在线文档

之前也有记录在B站学习的Vue基础入门学习笔记—>B站学习Vue入门笔记

比如说,那个v-for指令,这次我试了个双重循环的;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- js部署 -->
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="demo">
			<table border="1">
				<th>编号</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>公司ID</th>
				<th>部门</th>
				<tr v-for="(u,index) in uus">
					<td>index+1</td>
					<td>u.name</td>
					<td>u.age</td>
					<td><span v-for="a in u.arr">a.id  </span></td>
					<td><span v-for="a in u.arr">a.part  </span></td>
				</tr>
			</table>
		</div>
		
		<script type="text/javascript">
			var demp = new Vue(
				el:'#demo',
				data:
					uus:[
						name:'小Q',age:'20',arr:[id:1,part:'Q基金会',id:2,part:'QQ基金会'],
						name:'小W',age:'22',arr:[id:1,part:'W基金会'],
						name:'小e',age:'23',arr:[id:1,part:'E基金会']
					],
					
				
			)
		</script>
	</body>
</html>

3.vue-cli 搭建项目

Vue-cli就相当于脚手架,用于快速生成一个 vue 的项目模板;预先定义目录结构及基础代码;
主要功能包括生成统一目录结构;可进行本地调试以及项目测试;热部署(及时更新;避免重复启动服务器;);可快速集成打包;

Node.js相当于运行在服务端的 JavaScript。事件驱动 I/O 服务端 JavaScript 环境,基于 Google 的 V8 引擎

npm 是 Node.js 的包管理工具,用来安装各种 Node.js 的扩展
JavaScript 的包管理工具,也是世界上最大的软件注册表。

这里我把上次的Node.js 16.11.1版本卸载了;装了 13.14.0的版本;

本次创建vue-cli项目搭建使用工具HBuilderX;注意先更新HBuilderX到3版本以上;

创建基础vue项目;本次学习的话;仅学习2版本的;

选中项目后,点击可打开终端命令窗口;

输入命令 npm run serve 即可运行项目本地服务器;若出现异常情况;可先去桌面,右击HbuilderX工具,选择使用管理员身份运行

访问生成的链接即可打开页面

App.vue中更新页面信息;不用重启服务器,保存及时更新代码;

若要停止服务;则在终端命令窗口Ctrl+c ;输入Y即可


在命令窗口输入npm run build 即可打包项目;
生成dist文件夹即打包后的文件;

4.页面路由

使用终端命令下载路由插件包

npm install vue-router --save-dev

首先在项目的src目录下创建目录router存放路由;目录view存放组件(页面);

view 目录中创建模拟的登录页面和主页面
Login.vue

<template>
	<div>
		这是模拟登录页面
	</div>
</template>

<script>
</script>

<style>
</style>

Main.vue

<template>
	<div>
		这是模拟主页面
	</div>
</template>

<script>
</script>

<style>
</style>

router目录下创建index.js;配置路由

import Vue from 'vue';
import router from 'vue-router'; /* 导入路由 */
import login from '../view/Login.vue'; /* 导入其他页面 */
import main from '../view/Main.vue'; /* 导入其他页面 */
Vue.use(router)
/* 定义组件路由 */
var rout = new router(
     routes: [
				
                  path: '/login',
                  name: 'index',
                  component: login
                ,
               
                  path: '/main',
                  component: main
                  
              ]
);
//导出路由;
export default rout;

main.js中配置导入路由

import Vue from 'vue'
import App from './App.vue'
//导入路由;
import router from './router'
//使用路由;
Vue.use(router);
Vue.config.productionTip = false

new Vue(
  render: h => h(App),
  router,
).$mount('#app')

App.vue中配置路由链接

<template>
  <div id="app">
	  小智RE0学VUE入门
	  <h2><router-link to="/index">首页</router-link></h2>
	  <h2><router-link to="/login">登录</router-link></h2>
	  <h2><router-link to="/main">主页</router-link></h2>
	  <router-view/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default 
  name: 'app',
  components: 
    HelloWorld
  

</script>

<style>
#app 
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;

</style>

启动服务器链接;
尝试使用

5.ElementUI

ElementUI官方网站

在终端命令输入命令;安装组件包

npm i element-ui -S

main.js中导入使用ElementUI组件

//导入使用ElementUI;
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

尝试在登录页面导入使用
Login.vue

<template>
  <div class="login_container">
     <!-- 登录盒子-->
     <div class="login_box">
          <!-- 头像盒子-->
          <div class="img_box">
                <img src="../assets/logo.png" />
          </div>
        <div style="margin-top: 100px; padding-right: 30px;">
			<!-- 登录表单-->
			 <el-form ref="form" :model="form" label-width="80px">
			   <el-form-item label="账号">
			     <el-input v-model="form.account"></el-input>
			   </el-form-item>
			   <el-form-item label="密码">
			     <el-input type="password" v-model="form.password"></el-input>
			   </el-form-item>
			   
			   <el-form-item>
			     <el-button type="primary" plain @click="login()">登录</el-button>
			     <el-button>取消</el-button>
			   </el-form-item>
			 </el-form>
		</div>
     </div>
  </div>
</template>

<script>
	export default
		data:function()
			return
				form:
					account:"",
					password:""
				
			
		,
		methods:
		  login()
			  console.log(this.form)
		  	
		
	
</script>

<style>
  html,body,#app,.login_container
    height: 100%;
    margin: 0px;
    padding: 0px;
  

    .login_container
      background-color: #00a7fa;
    

    .login_box
      width: 450px;
      height: 350px;
      background-color: #fff;
      border-radius: 10px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
    

    .img_box
       width: 130px;
       height: 130px;
       position: absolute;
       left: 50%;
       transform: translate(-50%,-50%);
       background-color: #fff;
       border-radius: 50%;
       padding: 5px;
       border: 1px solid #eee;
    
    
    .img_box img
         width: 100%;
         height: 100%;
         border-radius: 50%;
         background-color: #eee;
     
</style>

启动使用查看效果

6.Axios异步通信

Axios异步通信就可以当做是之前学的Ajax;
它是HTTP 的网络请求库.

Axios官网地址

使用终端命令安装axios包

npm install axios

在main.js中导入使用axios;且全局配置后端服务器的网址;

//导入使用axios;
import axios from 'axios';
//设置访问后台服务器地址
axios.defaults.baseURL="http://127.0.0.1:5277/api/";
//将 axios 挂载到 
Vue.prototype.$http=axios;

需要在登录组件页面的js标签块中进行编写

<script>
	export default
		data:function()
			return
				form:
					account:"",
					password:""
				
			
		,
		methods:
		  login()
			  //console.log(this.form);
			  //尝试向后端发送axios请求,且得到响应的数据;
			  this.$http.post("login/login",this.form).then(function(resp)
				  //输出回显的数据;
				  console.log(resp);
			  )
		  	
		
	
</script>

注意要和后端的路径接口相对应;
这里涉及到跨域问题;

/**
 * @author by @CSDN 小智RE0
 * @date 2021-12-27 
 *
 */
@RestController
@RequestMapping(value = "/api/login")
public class LoginController 

    //跨域接收;
    @CrossOrigin("http://localhost:8080/")
    @RequestMapping(value = "/login")
    public String login(@RequestBody User user)
        System.out.println(user);
        return "登录成功提示信息";
    

启动前端vue项目;启动后端项目;

已接收到传递的数据

以上是关于前后端分离学习笔记 ---[Vue基础]的主要内容,如果未能解决你的问题,请参考以下文章

系列文章--Node.js学习笔记系列

Windows编程课程学习笔记

Windows编程课程学习笔记

SpringBoot学习笔记——Thymeleaf

学习笔记-第五周-学习笔记

设计模式学习笔记(目录篇)