正文

前后端分离学习笔记---[vue基础](代码片段)

小智RE0  小智RE0  2023-03-08  296

关键词：

文章目录

建议官方文档学习 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项目;启动后端项目;

已接收到传递的数据

springboot+vue前后端分离项目（后台管理系统）(代码片段)

学习笔记学习资源来自于B站UP，up他讲的非常详细，对于熟悉两大框架很有用。我的作业源代码在文章末尾，欢迎有需要的同学，学习参考使用，内置SQL文件，导入后，开启springboot和vue服务即可使用... 查看详情

python全栈100天学习笔记day48前后端分离开发入门(代码片段)

前后端分离开发入门在传统的Web应用开发中，大多数的程序员会将浏览器作为前后端的分界线。将浏览器中为用户进行页面展示的部分称之为前端，而将运行在服务器，为前端提供业务逻辑和数据准备的所有代码统称... 查看详情

python全栈100天学习笔记day48前后端分离开发入门(代码片段)

第二季springboot+vue前后端分离项目实战笔记(代码片段)

...在b站：【第二季】全网最简单但实用的SpringBoot+Vue前后端分离项目实战SpringBoot+Vue项目实战第二季一、些许优化刷新丢失其它标签页缓存已打开标签页tagsViewCache()window.addEventListener("beforeunload",()=>lettabViews=t... 查看详情

前后端分离学习笔记--[权限分配案例](代码片段)

权限分配这块,其实在之前学习spring时,就已经作为案例练习过了;不过当时没有整理;最近学习springboot和vue部分这块儿也是可以搭建这个案例根据权限类型为不同的管理员生成不同的操作菜单不同的管理员登录到系统后台后,仅能看... 查看详情

ruoyi若依后台管理系统-学习笔记-前后端分离项目中下拉框验证失效(代码片段)

RuoYi若依前后端分离项目-下拉框验证失效BUG效果修复对比bug代码修复后治本之法代码是用若依生成的，所以起初我一直怀疑是我的表有问题，或者若依对下拉列表的验证不支持？？？虽然我口中默念着“这不... 查看详情

ruoyi若依后台管理系统-学习笔记-前后端分离项目中下拉框验证失效(代码片段)

前后端分离实践：基于vue实现网站前台的权限管理(代码片段)

Javascript做为当下的热门语言，用途很广泛，从前端到后端处处可见其存在，该技术如今在我们项目内部也大量使用来开发诸如CMS系统以及其他其他一些数据分析系统的前端页面，为此个人非常感兴趣并将其作为帽子卡的扩展内... 查看详情

springboot前后端分离vue个人博客系统(代码片段)

...目简介本项目使用springboot+mybatis+前端vue，使用前后端分离架构实现的个人博客系查看详情

前后端分离-vue(代码片段)

安装nodejs和npm默认使用国外镜像，下载速度慢，手动改为国内淘宝的（直接在CMD终端执行）npmconfigsetregistryhttps://registry.npm.taobao.org创建SPA（单页面）应用查看详情

b站云e办vue+springboot前后端分离项目——mvc三层架构搭建后台项目(代码片段)

...伴的指正。项目前端学习笔记目录B站云E办Vue+SpringBoot前后端分离项目——搭建vue.js项目B站云E办Vue+SpringBoot前后端分离项目——前端动态获取菜单目录一、项目简介本项目基于Vue+SpringBoot构架一个前后端分离项目。本项... 查看详情

使用vue+jfinal框架搭建前后端分离系统(代码片段)

前后端分离作为Web开发的一种方式，现在应用越来越广泛。前端一般比较流行Vue.js框架，后端框架比较多，网上有很多Vue+SpringMVC前后端分离的demo，但是Vue+JFinal框架貌似没有搜到，本文基于Vue.js和JFinal框架，给出了搭建了一个前... 查看详情

springboot+mybatisplus+vue前后端分离项目快速搭建前端篇快速生成后端代码封装结果集增删改查模糊查找毕设基础框架(代码片段)

前后端分离项目快速搭建【前端篇】后端篇前端篇创建vue项目安装所需工具开始编码1、在根目录下添加vue.config.js文件2、编写main.js3、编写App.vue4、编写axiosutils.js5、在components目录下编写menu.vue7、在router目录下编写router.js8、在src... 查看详情

前后端分离项目实战从零构建后一个完整的后台项目之vue的学习(代码片段)

文章目录一）什么是vue？1、渐进式框架是什么意思？2、为什么用vue而不是其他的前端框架？目前流行的前端框架：1）渐进式对比Angular：对比React：2）其他优势二）vue开发环境的搭建1、安... 查看详情

前后端分离项目实战从零构建后一个完整的后台项目之vue的学习(代码片段)

手写一个vue前后端分离项目(代码片段)

手写一个Vue前后端分离项目做一个简单的联系人管理，码云源码地址Vue前端+C#WebAPI+MySql前端选择单网页Vue，没有借助脚手架。后端选择C#的WebAPI。数据库为MySql。1.搭建前端1.1创建静态的vue页面预览界面代码参考<!D... 查看详情

手写一个vue前后端分离项目(代码片段)

springboot+vue前后端分离学习路线

我整理了SpringBoot+vue前后端分离的学习路线。这篇博客是一个规划，之后，会按照这篇的顺序对每一个节点进行详细的知识汇总。其中包括资料，代码实践，以及我对此的理解。1.ssm框架的配置，以及应用，2.SpringBoot的介绍，如... 查看详情