本博客属作者原创，未经允许禁止转载，请尊重原创！如有问题请联系QQ509961766（一）需求 有学生和老师，超级管理员3个角色，老师登录进去可以编辑学生信息，比赛成绩等等，普通学生登录进去只能查询成绩，修改自己的信息，超级管理员登录进去什么都可以操作，并且有且只能有一个，无法被删除。 注意本系统数据库设计都没有考虑索引，严格来说查询字段需要加入索引 首先需要新建5个表，学生表，里面是学生的一些基本信息， 成绩表，...
1、环境准备（需要安装） （1）vue-cli3 （2）nodejs （3）axios （4）pg 编译器：vscode 2、个人思路 （1）在pgsql里建数据表 （2）利用Nodejs+pg包，读取pgsql的数据 （3）利用Nodejs+express将读取的数据库数据，发送到建立的web服务器里 （4）利用VUE+axios读取web服务器里的数据，并在自己的客户端显示 3、工程目录（红色框内是要用到的目录） （1）后端目录（2）前端目录（3）数据库4、具体实现 （1）PGsql里创建数据表 这个...
基于vue3.0+express框架+mysql数据库的简易酒店管理系统 项目介绍：项目使用vue-cli3.0进行构建，实现前后端分离，前端使用vue3.0+elementui，后端使用express框架，使用vue-router进行路由跳转，使用vuex进行数据管理，使用axios请求后端，使用mysql存储数据 项目功能： 1.管理员登录与注册 (1)登录：使用给定的工号和密码进行登录，才能获得操作管理系统的权限 (2)注销：点击退出登录按钮进行注销 2.入住登记 填写入住登记...
在做这个项目练手时碰到的一些问题记录一下，加深印象 服务器的目录层级如下： 一、简单的搭建一个服务器，如何划分路由 1.在搭建好的后端服务器 app.js 中导入路由，代码如下：var express = require(express)// 导入路由 用户 var user = require(./router/user.js) var app = express()app.use(express.static(public))// 在路由配置前添加以下代码 解决跨域问题 app.all(*, function(req, res, next) {res.header("Acce...
1、首先新建一个webpack项目，这里不再讲解怎么新建（我这里的是shopping项目名） 2、在项目中新建一个文件夹service(名称自取)3、通过控制台进入到该文件夹中，并且执行npm init -y4、继续执行cnpm install koa --save，安装koa25、新建这三个文件，（名称自取）6、打开index.js文件，并且写入如下代码，测试koa是否安装成功(可用)const Koa = require('koa'); const App = new Koa();App.use(async(ctx)=>{ctx.body = "<h1>hello...
在项目中，分页是由后台SQL获取。在table表格多选时，容易把选中的值传给后台，但是怎样在返回上一页时怎样记住表格多选的数据？？当返回第二页时，应该把第一条数据再选中，保持选择状态。具体思路：在页面不重新刷新加载时，使用二维数组保存el-table表格多选结果。其中一维下标记录页码，二维下标记录选中的数据。 说明：tableLoad（）函数，this.tableData---通过Ajax获取本页码的列表数据 说明：handleSelectionChange（）---...
前面我们已经做完了环境的部署和基本的测试，现在我们要开始使用我们的mongoose来连接我们的数据库，做到前后端分离这样一个操作，也就是经常说的mvc（model view controller），在model和controller之间经常需要一些工具来进行对接，帮助完成数据库的操作和通讯 什么是mongoose呢：Mongoose是一个开源封装好的实现Node和Mongodb数据通讯的数据建模库 第一步，安装我们的mongoosenpm install mongoose --save 接下来我们在我们的se...
目的：QQ互联保存openId到数据库 方法一 SDK里面提供了一个获取 openId 的方法 我在这个方法里面去 写 ajax 的时候报错了说是未定义。问了别人别人说是作用域不同，要用箭头函数，或者用一个变量接受this。我使用的是后者。代码如下 方法二： 通过api https://www.jianshu.com/p/80450c060343 总结： 1、异步请求一般都有回调方法，直接在回调方法里面进行相关操作。 2、当作用域不同的时候，可以使用箭头函数，...
Vue数据传输 页面渲染需要数据。这些数据或从服务器来，或从js来，但无论如何作为前端语言Vue需要一种有效的页面数据管理机制。 0. 理解Vue的方法组成 computed computed是计算属性的; 它会根据所依赖的数据动态显示新的计算结果, 该计算结果会被缓存起来。computed的值在getter执行后是会被缓存的。如果所依赖的数据发生改变时候, 就会重新调用getter来计算最新的结果。 watch watch它是一个对data的数据监听回调, 当依赖的data的...
vue双向数据绑定原理是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图,实现数据和视图同步。 第一步： 需要observer的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter，这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化 第二步： compile解析模板指令，将模板...
html代码: <!-- 弹出框 --><el-dialogtitle="选择参与人":visible.sync="dialogCreateFormVisibleTDCY"width="40%":before-close="handleClose":close-on-click-modal = "false"><el-inputplaceholder="输入关键字进行过滤"v-model="filterText"></el-input><el-row><el-col :span="24"><div><div class="searchStyle">可选参与人</div><div class="TDCYstyle"><el-tree ref="userTree":data="treeData":default-checked-keys...
是结合订阅发布模式，通过object.defineProperty来实现数据双向绑定。 observer会对data里面所有的属性进行数据劫持和数据代理，给数据对象的某个值赋值，就会触发setter，那么就能监听到了数据变化。watcher是监听data里面所有的属性，当属性被改变之后才会被触发，自身必须有一个update()方法。compile对模版进行解析，将模板中的变量替换成数据，然后初始化渲染页面视图，添加监听数据的订阅者，一旦数据有变动，收到通知，就会...
很早之前就了解了数据劫持现，重温一下源码又有了新的理解主要还是了解里面的设计思想观察者模式 import Vue from 'vue'let vm = new Vue({el: '#app',data () {return {title: '学生列表',classNum: 1,info:{a:{b: 1}},teachers: ['张三','李四'],students: [{id: 1,name:'小红'},{id: 2,name: '小明'}]}} }) 写项目写多了感觉没提升就得看看源码，提高下自己的素养。经常这样写vue2.0，new出一个vue对象里面是一个对象里面有很多...
本以下一个简单的语句运行没有问题，传递参数为对象，可运行发现，后端无法取得数据。 axios.post("/home/addCabinet",{cbt:this.cur}).then(function (res) { if (res.data == "ok") {alert("操作成功"); } else { alert(res.data);}}) 通知百度，发现axios传值并不简单，可以说麻烦，总结了几个解决办法： 如果是get提交axios.get(/user, { //params参数必写 , 如果没有参数传{}也可以params: { id: 12345， name: user } }) 如...
一、数据请求 (1)fetch 为什么使用? XMLHttpRequest 是一个设计粗糙的 API，配置和调用方式非常混乱， 而且基于事件的异步模型写起来不友好。 兼容性不好，这是W3C的标准，将来如果实现兼容，一定大火 //get?fetch("**").then(res=>res.json()).then(res=>{console.log(res)})?fetch("**").then(res=>res.text()).then(res=>{console.log(res)})?//post?fetch("**",{?method:'post',?headers:?{?"Co...