旧梦半岛-CSDN博客

如何让一个div垂直水平居中：css方法：父盒子设置：display：table-cell; text-align:center; vertical-align:center;div设置：display：inline-block; vertical-align:center;使用css3的transform：父盒子设置：display:relative;div设置：transform:translate(-50%,-50%); position:absolute; top:50

2021-03-12 11:43:36 530

原创 Node学习06:express框架与vue结合使用，无法保存session内容解决方案

express框架与vue结合使用，无法保存session内容解决方案问题重现：使用express框架编写后端接口时，使用中间件判断用户是否登录，将登录信息保存至session中，登陆成功时该接口session能够获取到，访问其他界面时，界面遭受拦截，并且无法获取保存的session信息：登录接口，当登陆成功保存用户信息至session中// 登陆router.post('/login', async (req, res) => { let arr = [req.body.usern

2021-03-05 17:16:05 577

原创 Node学习05_express:表单POST请求的数据获取问题

repress:表单POST请求的数据获取问题post方式提交的表单数据无法利用req.query获取：解决方法：// 解析post提交的数据app.use(express.urlencoded())总结:get请求方式的表单数据存放于req.query对象中，而post请求的数据存放于req.body中...

2021-02-19 16:26:10 98

原创 Node学习04_使用ejs模板引擎css样式不生效踩坑记录

使用ejs模板引擎踩坑记录引入css样式不生效问题：如图所示，使用费ejs模板引擎时，之前编写的界面样式全部失效；问题原因：设置了默认静态目录导致：根据控制台报错：可知，是引入的css样式文件路劲的问题，由于使用ejs模板引擎，已经设置了默认的静态目录，所以在引入css样式文件时可以直接省略前缀：前缀省略，问题完美解决：...

2021-02-07 15:48:56 980

原创 Node学习03_Node操作mysql数据库

Node操作mysql数据库下载mysql包：cnpm install mysq操作数据库代码：/* * @Author: your name * @Date: 2021-02-01 10:06:29 * @LastEditTime: 2021-02-01 10:24:11 * @LastEditors: Please set LastEditors * @Description: In User Settings Edit * @FilePath: \01Mysql\inde

2021-02-01 11:37:40 83

原创 Vue学习31_vue-awesome-swiper使用过程遇到的坑以及解决方案

vue-awesome-swiper使用过程遇到的坑以及解决方案第一个坑：根据vue-awesome-swiper官方文档对vue-awesome-swiper进行了引用：import 'swiper/css/swiper.css'启动项目时：提示无法找到该文件：找不到原本的截图，此处提示错误应该是找不到import 'swiper/css/swiper.css’文件原因：文件夹目录结构发生了变化：还有另一种可能是，在新版中引用的不是该文件，而是通过：import 'swiper/sw

2020-11-28 19:12:12 523

原创 Node学习02_Node创建web服务器

Node创建web服务器node创建web服务器：// 引用系统模块，http用于创建网站服务器的模块const http = require('http')// 创建web服务器,app就是网站服务器对象const app = http.createServer()// 为网站服务器对象添加一个事件，当用户发送请求时执行// res:响应，req请求app.on('request', (req, res) => { // 响应 res.end('<h2&gt

2020-11-16 15:41:16 61

原创 Node学习01_Node.js中的模块加载机制

Node.js中的模块加载机制当模块拥有路劲但没有后缀时：require(’./find.js’)或者 require(’./find’)当模块没有路径且没有后缀时： require(‘find’)

2020-11-16 14:39:23 64

原创 Better-scroll

Better-scroll的基本使用引入Better-scroll的原因：原生的滚动在电脑端比较流畅，而在手机端显得异常卡顿，为了解决这一问题，引入了Better-scroll：Better-scroll的基本使用：

2020-11-03 16:58:58 146

原创 Vue学习30_Vue中使用axios

Vue中使用axiosaxios的功能特点：-在浏览器中发送XmlHttpRequests请求；-在node.js中发送http请求；-支持Promise API-拦截请求和相应；-转换请求和相应数据；axios的安装：npm install axios --saveaxios的基本使用：-导入 import axios from ’axios-使用：axios({ url:'http://123.207.32.32:8000/home/multidata', methods:'ge

2020-10-27 09:22:45 255

原创 Vue学习29_Vue中Devtools的安装以及vuex的几个核心概念

Vue状态管理的属性在使用vue时，vue为我们提供了一个浏览器插件Devtools，用于跟踪vue的操作，为我们使用vue进行开发时提供了极大的便利，安装方式有两种：一种是在谷歌浏览器的网上商店进行安装，点击浏览器右上角的菜单，更多工具，拓展程序，进去里面进行安装，我在安装时遇到了一个问题就是谷歌的网上商店进不去，所以这里采用另一种安装方式：附安装教程：https://blog.csdn.net/yizufengdou/article/details/103985709在最后一步拖拽时可能会提无法使

2020-10-26 12:36:00 248

原创 Vue学习28_Vue的状态管理vuex

Vue的状态管理vuexVuex：Vuex是一个专门为vue.js应用程序开发的状态管理模式，状态管理可以理解成把需要多个组件共享的变量全部存储在一个对象里；什么样的变量需要存放在vuex：比如说用户的登陆状态、用户名称、头像、地理位置；比如说商品的收藏，购物车的物品；vuex的基本使用：单页面状态管理：state中的数据在view中显示，view中的数据又可以执行一些actions，actions的执行又可以改变state中的数据，这样叫做单页面状态管理。示例代码：<templat

2020-10-25 18:00:07 107

原创 Vue学习27_使用vue-router实现简易的路由跳转

使用vue-router实现简易的路由跳转

2020-10-25 11:33:58 304

原创 Vue学习26_Vue-cli的认知（暂空，后续将根据项目经验进行总结）

Vue-cli的认知

2020-10-25 11:18:58 92

原创 Vue学习25_Vue的异步操作Promise

Vue的异步操作Promise

2020-10-25 09:52:59 1550 1

原创 Vue学习24_Vue中ES6的模块化实现

Vue中ES6的模块化实现模块化导出：示例代码：let name = '小明'let age = 18let flag = trueif (flag) { console.log(name);}function sum(num1, num2) { return num1 + num2}export { flag, sum}// 导出函数export function result(num1, num2) { return num1 *

2020-10-25 09:33:58 285

原创 Vue学习23_Vue插槽slot的使用

Vue插槽slot的使用在组件开发过程中，我们有时候需要对组件预留出一个位置，根据需要往其中插入某些内容，倘若将组件写死，内容固定，不利用我们对组件的重复使用，Vue中引入了插槽的概念，使得我们能够在组建开发中，为组件预留出位置，在需要使用时根据需求插入不同的组件。插槽的基本使用示例代码： <div id="app"> <div> <cpn> <button>按钮<

2020-10-24 17:36:21 297

原创 Vue学习22_Vue父子组件的数据访问

Vue父子组件的数据访问父组件访问子组件：$ childern/$ refs示例代码： <div id="app"> <mycpn ref="ref1"></mycpn> <mycpn ref="ref2"></mycpn> <mycpn ref="ref3"></mycpn> <button type="button" @click="b

2020-10-24 17:22:13 121

原创 Vue学习21_Vue父子组件的数据传递案例（v-model双向绑定父子组件数据）

Vue父子组件的数据传递案例（v-model双向绑定父子组件数据）示例代码： <div id="app"> <mynpn :number1="num1" :number2="num2" @num1change="num1change" @num2change="num2change" /> </div> <template id="npn"> <div> <p

2020-10-24 17:12:35 161

原创 Vue学习20_Vue父子组件的数据传递

Vue父子组件的数据传递父组件向子组件传递数据(props):在组件开发中，我们有时候需要在子组件中访问父组件的数据，因此则需要用到props属性进行父组件向子组件传递数据：**示例代码：**其中需要在props对象中对父组件传递的数据进行限制，比如限定类型，限定默认值等，在使用父组件数据时，需要利用v-bind动态绑定props的值，令其等于父组件的数据名称，以此来达到使用父组件数据的目的 <div id="app"> <mycpn></myc

2020-10-24 17:09:55 123

原创 Vue学习19_Vue组件数据的存放及为什么组件的data必须是一个函数

Vue组件数据的存放组件中的数据存放于data(){}函数中，并且必须是一个函数！我们都知道，在Vue实例中，有一个属性data用于存放数据，我们可以将所需要的数据存放在data属性中，在实例中，data是一个属性，它可以是一个对象，对象中存放着我们所需要的数据，但是为什么在组件中，数据存放的data必须是一个函数呢？示例代码： <div id="app">  <mycpn></mycpn&

2020-10-24 16:53:36 335

原创 Vue学习18_Vue组件的语法糖与组件的分离写法

Vue组件的语法糖与组件的分离写法Vue组件的语法糖：在Vue中，传统的组件使用需要分三步进行，分别是创建组件构造器，注册组件与使用组件，但是如果使用一个组件都要使用这三部分，并且在Vue的组件开发中，使用组件是经常需要做的事情，每一次都使用这三部，未免有些太复杂，因此Vue提供了组件的语法糖写法，简化了使用组件的步骤。在这里，分别使用组件的语法糖注册全局组件与局部组件： <div id="app"> <cpn1></cpn1>

2020-10-24 16:44:51 141

原创 Vue学习17_Vue的全局组件与局部组件/父组件与子组件

Vue的全局组件与局部组件在Vue的组件中，我们有时候希望一个组件能够在全局中进行使用，而有的组件则希望在特定的实例中才能进行使用，因此Vue为我们提供了一种全局组件与局部组件的概念：全局组件与局部组件：示例代码： <div id="app"> <my_cpn></my_cpn> <my-cpn></my-cpn> </div> <script>

2020-10-24 16:25:53 189

原创 Vue学习16_Vue组件的基础使用步骤

Vue组件的基础使用步骤使用Vue组件大致可以分为三个步骤创建组件构造器：示例代码： // 创建组件构造器对象 const myComponent = Vue.extend({ // ES6语法``定义字符串，允许换行 template: ` <div> <p>头部导航</p>

2020-10-24 16:08:18 190

原创 Vue学习15_Vue中v-model的使用

Vue中v-model的使用在Vue中，我们有时候需要对数据进行双向绑定，所谓的双向绑定的意思就是在Vue的data中定义的变量的值，当改变data中变量的值时，通过Mustache语法获取的值也发生改变，当童Mustache获取的值发生改变时，data的值也随之改变v-model的基本使用:示例代码：将data中的变量与输入框的值进行双向绑定： <div id="app"> <input type="text" v-model="message">

2020-10-24 15:41:01 510

原创 Vue学习14_Vue高阶函数的使用

Vue高阶函数的使用filter函数：filter函数的回调函数必须是一个boolean值，当返回一个true值时，函数内部会自动将这次回调的n加入到新的数组中，当返回一个false值时，回调函数会将这一次的n过滤掉，个人理解为filter函数相当于一个过滤器，只有满足条件的n才会被留下示例代码：从数组中筛选小于100的数，保留到新的数组中 <script> // 定义一个数组 const str = [12, 20, 100, 23, 67, 4

2020-10-24 14:40:29 1788

原创 Vue学习13_Vue实现简易的图书购物车

Vue实现简单的图书商城利用vue实现简单的图书商城系统，包括点击对应的书本数量，数量增加，点击减少按钮，数量减少，加个也随着书本数量的变化而变化，当点击移除按钮时，书本从购物车中移除，当所有书本都被移除时，显示购物车为空信息提示：HTML代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="

2020-10-23 17:39:42 2359

原创 Vue学习12_Vue中数组的常用方法

数组的常用方法push方法：push方法可以往数组最后面追加元素，既可以追加一个元素，也可以同时追加多个元素示例代码：使用push可以分别在数组最后追加元素，追加的元素可以是一个也可以是多个<div id="app"> <ul> <li v-for="letter in letters"> {{letter}} </li> <

2020-10-23 17:16:45 718 2

原创 Vue学习11_Vue的遍历循环

Vue的遍历循环v-for遍历数组：我们有时候需要对数组进行遍历，在vue中，v-for为我们提供了一种遍历数组的方式：我们既可以只遍历数组的值，也可以通过v-for遍历数组的下标值：示例代码： <div id="app">  <p v-for="book in books">{{book}}</p>

2020-10-23 16:22:21 588 3

原创 Vue学习10_Vue实现简易的切换登录方式

Vue实现简易的切换登录方式示例代码： <div id="app">   <span v-if="flag"> <label for="username

2020-10-22 16:25:01 814

原创 Vue学习09_Vue的条件判断

Vue的条件判断v-if的基本使用：有时候我们需要控制标签内容的显隐，在满足某些条件时，显示标签，某些时候又要隐藏标签，因此就可以引入v-if，为其设置一个boolean值，以此来控制标签的显隐：示例代码： <div id="app"> <h3 v-if="isShow">{{message}}</h3> </div> <script> const app = new Vue({

2020-10-22 16:06:34 306

原创 Vue学习09_v-on的修饰符

v-on的修饰符stop：stop修饰符的使用是为了解决事件冒泡问题：示例代码：在div块级标签内定义一个按钮，并且为div和按钮都添加了点击的事件监听：  <div @click="divClick"> div内容 <button @click="btnClick">按钮</button> &lt

2020-10-22 15:41:36 170

原创 Vue学习08_事件监听及参数传递

事件监听在vue中，我们有时候需要对浏览器事件进行事件监听，比如当鼠标点击某一个按钮时，触发某种事件，这时，Vue为我们提供了方便快捷的方式v-on：v-on的基本使用示例代码：定义两个按钮，点击对应的按钮，对数据进行相应的增加和减少： <div id="app"> <h3>{{counter}}</h3> <button v-on:click="add">+</button> &l

2020-10-22 15:04:49 862

原创阶段性知识点总结，往后将细写

一段时间以来的学习内容这一段时间以来，学习的东西太多来不及整理，先给出目录，后续将会对这一阶段所学内容进行整理：阶段学习目录表截图：ES6的学习：包括箭头函数的使用，块级作用域以及对象的增强写法vue的基础操作，包括v-for,v-on,v-once,v-cloak利用v-bind动态绑定属性vue的计算属性vue的事件监听：vue的条件判断：vue的循环遍历：利用之前所学知识点进行了一个图书购物车的小案例实现：vue高阶函数的使用：filter、map，reduce

2020-10-20 16:58:55 125

原创 Vue学习07_ES6语法

ES6语法没有块级作用域引起的问题：在这里，我们设置了5个按钮，希望点击按钮时，在控制台打印出对应的按钮编号：示例代码： <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> &

2020-09-27 11:12:12 121

原创 Vue学习06_计算属性

计算属性当我们有时候需要对要展示的数据进行处理时，比如输入姓氏与名称，例如：张三丰，接收到的数据有两个，姓氏：张，以及名：三丰，按照之前的mustache语法写也是可以写，但是比较复杂，也可以写一个函数来获取两个数据的组合，但是这里都显得很复杂，因此，Vue引入计算属性这一东西：计算属性的基础用法示例代码：<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8">

2020-09-26 20:00:38 159

原创 Vue学习05_动态绑定style属性

动态绑定style属性v-bind不仅可以动态绑定class属性，还可以绑定style属性：v-bind动态绑定属性（对象方法）示例代码：<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &

2020-09-26 19:15:06 430

原创 Vue学习04_动态绑定class属性

绑定属性v-bind：动态绑定属性

2020-09-26 16:20:17 626

闽江学院计算机与控制工程学院linux实验报告

空空如也