- 博客(41)
- 收藏
- 关注
RSS订阅原创 仿今日头条项目——文章详情
1.创建组件并配置路由1.创建 views/article/index.vue组件<template> <div class="article-container">文章详情</div></template><script>export default { name: 'ArticleIndex', components: {}, props: { articleId: { type: ...
2022-04-19 13:42:28
487
原创 仿今日头条项目——首页（文章搜索）
1.创建组件并配置路由1、创建 src/views/search/index.vue<template> <div class="search-container">搜索页面</div></template><script> export default { name: "SearchPage", components: {}, props: {}, data() { ...
2022-04-18 16:22:05
488
原创 仿今日头条项目——首页（频道编辑）
1.频道编辑组件1.1处理页面弹出层在 data中添加一个数据用来控制弹层的显示和隐藏，然后在首页模板中的频道列表后面添加弹出层组件data () { return { ... isChannelEditShow: false }} <!-- 频道编辑弹出层 --> <van-popup v-model="isChannelEditShow" closeable position="b...
2022-04-15 17:03:56
1719
原创 仿今日头条项目——首页（展示文章列表）
1.头部导航栏组件1、使用导航栏组件2、在导航栏组件中插入按钮<template> <div class="home-container"> <!-- 导航栏 --> <van-nav-bar class="page-nav-bar"> <van-button class="search-btn" slot="title" type="info"
2022-04-14 17:26:48
1888
原创 仿今日头条项目——个人中心
1.TabBar处理通过分析页面，我们可以看到，首页、问答、视频、我的 都使用的是同一个底部标签栏，我们没必要在每个页面中都写一个，所以为了通用方便，我们可以使用 Vue Router 的嵌套路由来处理父路由：一个空页面，包含一个 tabbar，中间留子路由出口子路由：首页、问答、视频、我的1.创建 tabbar 组件并配置路由src/views/layout/index.vue:<template> <div class="layout-containe
2022-04-07 19:26:42
459
原创 仿今日头条项目——登录注册
1.创建组件并配置路由1.创建 src/views/login/index.vue<template> <div class="login-container">登录页面</div></template><script>export default { name: 'LoginPage', components: {}, props: {}, data () { return {} }, co
2022-04-07 14:53:21
795
原创 仿今日头条项目——项目初始化
1.使用 Vue CLI 创建项目> Babel：es6 转 es5> CSS Pre-processors：CSS 预处理器，后面会提示你选择 less、sass、stylus 等> Linter / Formatter：代码格式校验2.加入git版本管理2.1创建远程仓库2.2将本地仓库推到线上3.调整初始目录结构3.1删除初始化的默认文件3.2新增调整我们需要的目录结构- src/api 目录:存储接口封装- sr...
2022-04-06 15:21:31
731
原创 Vuex——黑马头条项目（vuex体验版）
1.搭建项目1.1通过vue-cli脚手架搭建项目：vue create toutiao(选择 vuex/eslint（standard）/pre-cssprocesser（less）)1.2在main.js中引入样式：import ‘./style/index.css’1.3拷贝图片资源到assets目录下1.4在App.vue中拷贝基本结构：<div id="app"> <ul class="catagtory"> <
2022-04-03 17:24:55
1436
2
原创 vant组件库——网易云音乐案例
自定义组件内标签+内容1.准备MyTable.vue组件（子） – 内置表格, 传入数组循环铺设页面, 把对象每个内容显示在单元格里 2.准备UseTable.vue（父） – 准备数据传入给MyTable.vue使用...
2022-04-01 00:44:26
1922
原创 vue——tabbar案例
1.项目初始化组件拆分: MyHeader.vue – 复用之前的 MyTabBar.vue – 底部导航 MyTable.vue – 封装表格 三个页面:- MyGoodsList.vue – 商品页 - MyGoodsSearch.vue – 搜索页 - MyUserInfo.vue – 用户信息页①: vue create tabbar-demo ②: yarn add less [email protected] -D ③: yarn .
2022-03-28 15:36:28
1544
1
原创 电商项目——购物车案例***
1.项目初始化效果图：①: vue命令创建项目shopcar-demo ②: 下载bootstrap, less, [email protected] ③: main.js – 引入bootstrap样式 import "bootstrap/dist/css/bootstrap.css" //引入第三方包里的某个css文件④: 创建4个组件文件, 标签和样式（略）⑤: 把组件相应的引入到对应位置使用2.头部自定义需求：组件支持自定义
2022-03-26 16:57:18
1417
原创 vue——$nextTick输入框聚焦案例
目标：点击按钮自身隐藏，出现输入框并马上处于激活状态错误写法：this.$refs.myInp.focus() 原因: data变化更新DOM是异步的，输入框还没有挂载到真实DOM上正确写法：this.$nextTick(() => { this.$refs.myInp.focus() })优化：await this.$nextTick() thi...
2022-03-25 16:23:06
572
原创 vue——axios请求案例
1.获取所有图书信息功能: 点击调用后台接口, 拿到所有数据 – 打印到控制台 1.组件UseAxios.vue引入、注册及使用（省略）2.下载：yarn add axios3.引入：import axios from "axios"4.发起axios的请求：methods: { getAllFn() { axios({ url: "http://123.57.109.30:3006/api/getbooks", method:
2022-03-25 00:23:16
1395
原创 vue——生命周期
1.钩子函数目标：Vue 框架内置函数，随着组件的生命周期阶段，自动执行分类: 4大阶段8个方法2.初始化1. new Vue() – Vue实例化(组件也是一个小的Vue实例) 2. Init Events & Lifecycle – 初始化事件和生命周期函数 3. beforeCreate – 生命周期钩子函数被执行 4. Init injections&reactivity – Vue内部添加data和methods等 5. .
2022-03-24 16:52:14
221
原创 vue——todo案例
javascript:let btn = document.querySelector('.buy-button')setInterval(function() {btn.addEventListener('click', function() {})console.log('点击成功');}, 100)
2022-03-23 15:24:25
1159
原创 vue——全选与反选案例
1.小选影响全选1.先静态后动态，准备好html+css+js，再把数据循环展示到页面<li v-for="(obj, index) in arr" :key="index"> <!-- 3. 对象.c - 关联 选中状态 --> <input type="checkbox" v-model="obj.c" /> <span>{{ obj.name }}</span> <
2022-03-19 12:35:39
1191
原创 vue——品牌管理案例
1.数据铺设1. 下载bootstrap：yarn add bootstrap2.在main.js引入bootstrap：import "bootstrap/dist/css/bootstrap.css"3.html+css4.list数据铺设表格<tbody> <tr v-for="obj in list" :key="obj.id"> <td>{{ obj.id }}</td>..
2022-03-18 15:55:40
705
原创 vue脚手架
1.@vue/cli 目录和代码分析1.1main.js（入口文件）（连接app.vue和index.html之间的桥梁）import Vue from 'vue' //引入vue对象，类似于<script src="vue.js"></script>import App from './App.vue' //app.vue文件里的对象引入过来（vue项目页面 入口）Vue.config.productionTip = false //在控制台有一句提示.
2022-03-18 14:42:30
54
原创 API接口案例
1. 案例需求基于 MySQL 数据库 + Express 对外提供用户列表的 API 接口服务。用到的技术点如下： 第三方包 express 和 mysql2ES6 模块化Promiseasync/await2. 主要的实现步骤搭建项目的基本结构创建基本的服务器创建 db 数据库操作模块创建 user_ctrl 业务模块创建 user_router 路由模块3. 搭建项目的基本结构启用 ES6 模块化支持：在 package.json 中声明 "ty
2022-03-15 15:29:27
2886
原创 同步任务及异步任务
1.同步任务和异步任务为了防止某个耗时任务导致程序假死的问题，JavaScript 把待执行的任务分为了两类：同步任务（synchronous） 又叫做非耗时任务，指的是在主线程上排队执行的那些任务 只有前一个任务执行完毕，才能执行后一个任务异步任务（asynchronous） 又叫做耗时任务，异步任务由 JavaScript 委托给宿主环境进行执行 当异步任务执行完成后，会通知 JavaScript 主线程执行异步任务的回调函数...
2022-03-15 14:56:58
168
原创 大事件后台管理系统——文章管理
1.文章类别模块1.1获取文章分类的列表利用模版引擎快速渲染表格数据<!-- 表格数据的模板 --> <script type="text/html" id="tpl-table"> {{each data}} <tr> <td>{{$value.name}}</td> <td>{{$value.alias}}</td> <t
2022-03-12 17:38:55
2134
1
原创 大事件后台管理系统——个人中心
1.创建验证规则函数个人中心——基本资料：用来修改用户信息针对表单不同类型的数据需要设定验证规则函数，只有输入正确才能提交表单 form.verify({ nickname: function(value) { if (value.length > 6) { return '昵称长度必须在 1 ~ 6 个字符之间！' } } })在input标签中添加该验证规则 ：<div class="layui-for
2022-03-12 13:23:29
2176
原创 大事件后台管理系统——后台主页
1.在网页内显示网页1.1设置主体区域的html <div class="layui-body"> <!-- 内容主体区域 --> <iframe name="fm" src="/home/dashboard.html" frameborder="0"></iframe> </div>1.2设置侧边导航栏的css样式在a链接中添加target属性<ul .
2022-03-11 19:04:06
896
原创 大事件后台管理系统——搭建项目结构及登录注册界面
1.本地初始化git仓库1.git init 2.向暂存区一次性添加多个文件：git add .3.提交已暂存文件：git commit -m"init project"2.上传到github仓库1.打开github “+”：new repository2.设置名称为 web_bigevent3.复制命令行3.创建git分支1.快速创建及切换：git branch -d login2.查看分支列表：git branch4.登录注册——调用接口...
2022-03-10 13:11:21
793
原创 使用 Express 写接口
1.创建基本的服务器2.创建 API 路由模块3.编写 GET 接口4.编写 POST 接口如果要获取 URL-encoded 格式的请求体数据，必须配置中间件 app.use(express.urlencoded({ extended: false }))5.实现 JSONP 接口获取客户端发送过来的回调函数的名字得到要通过 JSONP 形式发送给客户端的数据根据前两步得到的数据，拼接出一个函数调用的字符串把上一步拼接得到的字符串，响应给客户端的 ..
2022-03-07 22:51:07
512
1
原创 自定义中间件
1. 需求描述与实现步骤自己手动模拟一个类似于 express.urlencoded 这样的中间件，来解析 POST 提交到服务器的表单数据。 实现步骤：1.定义中间件2.监听 req 的 data 事件3.监听 req 的 end 事件4.使用 querystring 模块解析请求体数据5.将解析出来的数据对象挂载为 req.body6.将自定义中间件封装为模块2. 定义中间件使用 app.use() 来定义全局生效的中间件，代码如下：3. 监听 req .
2022-03-07 20:21:42
409
原创 开发属于自己的包
1.需要实现的功能格式化日期 转义 HTML 中的特殊字符 还原 HTML 中的特殊字符2. 初始化包的基本结构1.新建 itheima-tools 文件夹，作为包的根目录2.在 itheima-tools 文件夹中，新建如下三个文件： package.json （包管理配置文件） index.js （包的入口文件） README.md （包的说明文档）3. 初始化 p...
2022-03-07 14:46:40
46
原创 Node——时钟web服务器案例
1.核心思路把文件的实际存放路径，作为每个资源的请求 url 地址。2.实现步骤1.导入需要的模块2.创建基本的 web 服务器3.将资源的请求 url 地址映射为文件的存放路径4.读取文件内容并响应给客户端5.优化资源的请求路径3. 导入需要的模块4.创建基本的 web 服务器5.将资源的请求 url 地址映射为文件的存放路径6.读取文件的内容并响应给客户端7.优化资源的请求路径...
2022-03-06 19:07:35
249
原创 Git（版本控制系统）
1.版本控制系统1.1本地版本控制系统1.2集中化的版本控制系统1.3分布式版本控制系统2.Git基础2.1 SVN 的差异比较传统的版本控制系统（例如 SVN）是基于差异的版本控制，它们存储的是一组基本文件和每个文件随时间逐步累积的差异。好处：节省磁盘空间 缺点：耗时、效率低（在每次切换版本的时候，都需要在基本文件的基础上，应用每个差异，从而生成目标版本对应的文件。）2.2 Git 的记录快照Git 快照是在原有文件版本...
2022-03-06 00:50:42
210
原创 Ajax——淘宝搜索框案例
1.获取用户输入的搜索关键词为了获取到用户每次按下键盘输入的内容，需要监听输入框的 keyup 事件 //监听文本框的keyup事件 $('#ipt').on('keyup',function(){ //获取用户输入的内容 varkeywords=$(this).val().trim() //判断用户输入的内容是否为空 if(keywords.length<=0){ // 如果关键词为空，则清空后隐藏搜索建议列表...
2022-03-05 14:15:29
417
原创 Ajax——跨域
1.同源策略和跨域同源：两个页面的协议，域名和端口都相同同源策略：浏览器提供的一个安全功能通俗的理解：浏览器规定，A 网站的 JavaScript，不允许和非同源的网站 C 之间，进行资源的交互，例如：1.无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB2.无法接触非同源网页的 DOM3.无法向非同源地址发送 Ajax 请求跨域：与同源相反实现跨域数据请求：JSONP 和 CORSJSONP：出现的早，兼容性好（兼容低版本..
2022-03-04 01:09:08
408
原创 Ajax——上传文件及显示上传进度案例
实现步骤：定义 UI 结构验证是否选择了文件向 FormData 中追加文件使用 xhr 发起上传文件的请求监听 onreadystatechange 事件1. 定义UI结构<!--1. 文件选择框--><inputtype="file"id="file1"/><!--2. 上传按钮--><buttonid="btnUpload">上传文件</button>...
2022-03-03 23:08:14
836
原创 Ajax加强
1.XMLHttpRequest1.1使用xhr发起get请求//1.创建XHR对象varxhr=newXMLHttpRequest()//2.调用open函数，指定请求方式与URL地址xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks')//3.调用send函数，发起Ajax请求xhr.send()//4.监听onreadystatechange事件xhr.onr...
2022-03-03 22:45:24
423
原创 Ajax——新闻列表案例
导入：jquery.js + template-web.js1.获取新闻列表数据 // 获取新闻列表的函数 function getNewsList() { $.get('http://www.liulongbin.top:3006/api/news', function (res) { if (res.status !== 200) { return alert('获取新闻列表数据失败！') } for (var i = 0...
2022-03-01 19:44:58
506
原创 Ajax——基于bootstrap的评论发布案例
1.渲染页面UI结构导入bootstrap.css + jquery.js插件：bootstrap 3 snippets1.1添加图书的Panel面板.bs3-panel-primary: Panel主面板 <!-- 评论面板 --> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="pan...
2022-03-01 16:48:10
301
原创 Ajax——form表单与模板引擎
1. <form>标签的属性 属性 值 描述 action URL地址 规定当提交表单时，向何处发送表单数据 method get或post 规定以何种方式把表单数据提交到actionURL enctype application/x-www-form-urlenco...
2022-03-01 16:12:24
59
原创 Ajax——聊天机器人案例
1.聊天界面UI布局导入：reset.css + main.css jquery.js + jquery-ui.js + jquery.mousewheel.js（鼠标滚轮滑动） scroll.js(侧边滚动条)(为了实现发送消息 滚动条滑到最下即初始化滚动条，需要调用resetui（））1.1html布局<div class="wrap"> <!-- 头部 Header 区域 --> &l...
2022-03-01 14:24:25
1108
1
原创 Ajax——基于bootstrap的图书管理案例
1.渲染页面UI结构导入bootstrap.css + jquery.js插件：bootstrap 3 snippets1.1添加图书的Panel面板.bs3-panel-primary: Panel主面板.bs3-input-group:addon:text:带有名字的输入框.bs3-button-primary:添加按钮 <!-- 添加图书的Panel面板 --> <div class="panel panel-primary"&...
2022-03-01 13:35:33
1215
原创 Ajax基本语法
1.客户端与服务器的通信过程2.$.get()$.get(url, [data], [callback]) 参数名 参数类型 是否必选 说明 url string 是 要请求的资源地址 data object 否 请求资源期间要携带的参数 .
2022-02-28 21:59:10
819
原创 数据可视化项目——Echarts
//学习笔记1.窗口适配方案:flexible.js (检测浏览器宽度，修改html文字大小)+rem单位（页面元素根据rem适配大小，配合cssrem插件）+flex布局移动端的效果图是750px，所以cssrem插件的基准值是 75px（flexible.js把屏幕分10等份）PC端效果图是1920px，所以cssrem插件的基准值是 80px（flexible.js把屏幕分24等份）此处修改flexible.js代码： // set 1rem = vi.
2022-02-25 17:07:59
1018
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人