VuePress项目搭建
VuePress项目搭建
VuePress项目搭建 AirHua-byte 6/2/2021 other 10分钟搭建个人博客,属于自己的小屋 这是一个纷繁的时代,信息渠道已经多到快让人喘不过气来。 而个人博客这种来自互联网初的载体,似乎与这个环境显得格格不入。 就像大海中的小岛,在海浪中显得那么不起眼,但它的存在本身就彰显了一种意义。 无论是波涛汹涌,还是风平浪静,它都在那里,而你的心也就找到了一处可以停靠的港湾。 关于VuePress VuePress(opens new window) 主题:一款简洁而优雅的 vuepress 博客 & 文档 主题。 vuepress-theme-reco(opens new window) 环境搭建 安装node8.0+ node官网(opens new window) # 设置淘宝镜像源 npm config set registry https://registry.npm.taobao.org # 查看使用的镜像源 npm config get registry # 安装淘宝镜像源 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装官网提示下载安装包安装即可 安装完成后打开命令行工具,输入node -v,若返回版本信息则安装成功。 创建博客工程 # 安装vuepress npm install vuepress -g # 安装脚手架工具 npm install @vuepress-reco/theme-cli -g # 创建项目 theme-cli init my-blog #my-blog可替换成自己需要的项目名称AIA 上述命令执行后,在命令行窗口会进行一系列的信息配置 ? What's the title of your project? #键入您的项目标题 ? What's the description of your project? #键入您的项目描述 ? What's the author's name? #键入作者姓名 ? What style do you want your home page to be?(Select afternoon-grocery, if you want to download reco_luan's '午后南杂') (Use arrow keys) ❯ blog # 此处通过方向键选择您首页风格,这里我们选择blog doc afternoon-grocery 接下来进入您的工程目录,启动您的项目吧 # 接入项目目录 cd my-blog #my-blog替换为之前您填入的项目名称 # 安装npm npm install # 运行测试环境 npm run dev 访问命令行输出的ip地址,一般为http://localhost:8080(若端口被占用则依次递增,以终端输出为准),即可访问您的博客了! 博客配置 工程结构 ├─ node_modules #存放着项目所需的依赖,我们不需要关心 ├─ docs #该目录下存放您编写的文档 │ └─ theme-reco │ ├─ api.md │ ├─ plugin.md │ ├─ theme.md │ └─ README.md ├─ blogs #该目录下存放您编写的博客文章 │ ├─ category1 │ │ ├─ 2018 │ │ │ └─ 121501.md │ │ └─ 2019 │ │ └─ 092101.md │ ├─ category2 │ │ ├─ 2016 │ │ │ └─ 121501.md │ │ └─ 2017 │ │ └─ 092101.md │ └─ other │ └─ guide.md ├─ .vuepress # 该目录下存放项目配置文件与静态资源 │ ├─ config.js #该文件用于配置项目 │ └─ public # 该目录下存放网页中所需的静态资源 │ ├─ hero.png # 首页大图 │ ├─ logo.png # 站点logo │ ├─ favicon.ico #站点图标 │ └─ avatar.png #头像 ├─ package.json #依赖管理文件 └─ README.md #这里存放着博客首页的内容 配置启动页 启动页展示的内容为博客标题与描述,即您在创建工程时输入的内容 您可以在.vuepress/config.js下找到如下内容,通过修改对应的字符来改变您的启动页 // .vuepress/config.js module.exports = { "title": "test", "description": "test", } 配置首页 首页即为启动页之后的主页面 首页的内容由项目根目录下的README.md 配置生成,您可以通过更改其中的配置项来变更您的首页 --- home: true #指定该文件为您的首页,改为false则不作为首页 heroText: vuepress-theme-reco #首页居中显示的文本 tagline: A simple and beautiful vuepress blog theme. # 首页显示的标语 # heroImage: /hero.png #首页显示的主图,默认被注释,取消注释可显示图片 # heroImageStyle: { # 首页主图的样式控制,默认被注释 # maxWidth: '600px', # width: '100%', # display: block, # margin: '9rem auto 2rem', # background: '#fff', # borderRadius: '1rem', # } bgImageStyle: { #背景图片样式 height: '450px' } # 以下内容基本上不生效,可以不用关心 isShowTitleInHome: false actionText: Guide actionLink: /views/other/guide features: - title: Yesterday details: 开发一款看着开心、写着顺手的 vuepress 博客主题 - title: Today details: 希望帮助更多的人花更多的时间在内容创作上,而不是博客搭建上 - title: Tomorrow details: 希望更多的爱好者能够参与进来,帮助这个主题更好的成长 --- Tip:代码中所引用的图片,均以.vuepress/public 为根目录 到此为主,您会注意到首页内容远不止这些,例如个人资料卡、文章列表,这些如何更改呢? 文章列表是根据您的文章自动生成的,一旦您发布的文章中的含有Front Matter,系统会自动将其收集至首页,默认按时间顺序展示 个人资料卡的头像和昵称由.vuepress/config.js进行配置,您可以找到如下内容,并进行修改配置。Category和Tag项则跟您的文章中标注的分类和标签自动生成 "author": "AirHua-byte", //昵称 "authorAvatar": "/avatar.png", //头像 Friend Link 则是您可以自由更改的,它的配置在.vuepress/config.js中,您可以找到如下内容,并对应进行修改配置,如果可以的话,您可以尝试将本站点添加为友链~ "friendLink": [ { "title": "AirHua-byte", //友联标题 "desc": "敲键盘、按快门与拨琴弦", //友链描述 "email": "3301833942@qq.com", //友链邮箱 "link": "http://huabyte.com" //友链地址 }, { "title": "vuepress-theme-reco", "desc": "A simple and beautiful vuepress Blog & Doc theme.", "avatar": "https://vuepress-theme-reco.recoluan.com/icon_vuepress_reco.png", "link": "https://vuepress-theme-reco.recoluan.com" } ], 配置底部 底边栏展示了如主题、备案信息、版权、年份等信息,这些内容仍需要您前往.vuepress/config.js进行修改 "author": "me", //版权信息,与昵称为同一数据 "record": "xxxx", //备案信息 "startYear": "2017" //开始年份 配置导航栏 logo 您需要前往.vuepress/config.js找到如下内容,修改您的logo图片,该图片存储在.vuepress/public中 "logo": "/logo.png", 搜索 您需要前往.vuepress/config.js找到如下内容,修改搜索相关配置 "search": true, //是否开启搜索 "searchMaxSuggestions": 10, //最多的搜索建议条目 导航 您需要前往.vuepress/config.js找到如下内容,修改导航相关配置 其中: 导航文本为导航按钮所展示的文字信息 路由地址即为跳转路径,根目录/对应您项目的根目录,在项目打包时会将对应目录下的README.md文件生成为index.html,例如您想将链接指向您的/docs/myDocument/README.md,则将link内容改为`/docs/myDocument,便可访问到您的文档。 图标则为导航文本左边显示的图标,可以在reco图标库 (opens new window)中寻找您需要的图标,也可以不要图标 "nav": [ //如下代码中,每个{...}即为一个导航块 { "text": "Home", //导航文本 "link": "/", //路由地址 "icon": "reco-home" //图标 }, { "text": "TimeLine", "link": "/timeline/", "icon": "reco-date" }, { "text": "Docs", "icon": "reco-message", "items": [ { "text": "vuepress-reco", "link": "/docs/theme-reco/" } ] }, { "text": "Contact", "icon": "reco-message", "items": [ { "text": "GitHub", "link": "https://github.com/recoluan", "icon": "reco-github" } ] } ], 或许您已经注意到,如果需要配置一个像Docs或者Contact这样的折叠的导航应该如何做呢?他们并不会直接跳转到对应的目标地址。 折叠导航的配置仍在之前所展示的导航配置代码中,现在将其单独提取出来进行分析。 即在导航块中加入一个items数组,数组元素为多个{...},是的,此{...}与导航块的{...}是同样的,所以您可以继续在其中添加文本、图标、路由等属性。 { "text": "Docs", //导航文本 "icon": "reco-message", //导航图标 "items": [ //导航子模块 { "text": "vuepress-reco", //子模块文本 "link": "/docs/theme-reco/" //子模块链接 } ] }, { "text": "Contact", "icon": "reco-message", "items": [ { "text": "GitHub", "link": "https://github.com/recoluan", "icon": "reco-github" } ] } 文档写作 Front Matter 在markdown文档的顶部插入一段yaml配置代码 一个完整的 Front Matter 案例: --- title: 烤鸭的做法 date: 2019-08-08 sidebar: 'auto' categories: - 烹饪 - 爱好 tags: - 烤 - 鸭子 keys: - '123456' publish: false --- 常用变量说明: title :文章标题,放弃通过一级目录定义标题的方式,改在 Front Matter 中定义。 date :文章创建日期,格式 2019-08-08 或 2019-08-08 08:08:08。 sidebar:是否开启侧边栏。 categories :所属分类。 tags :所属标签。 keys: 所属标签。 publish :文章是否发布。 另外还有一些Vuepress 默认主题的变量例如prev, next,请移步 官方文档(opens new window) 摘要 在markdown代码中,您将看到注释,注释前面的代码将显示在列表页面上的文章摘要中。 --- title: Vuepress使用指南(reco) date: 2020-08-16 sidebar: 'auto' categories: - 工具 tags: - vue publish: true --- ::: tip Vuepress是Vue作者尤雨溪开发的文档工具,本文采用Vuepress的reco主题进行相关配置说明 ::: <!-- more --> ### markdown正文 deploy.sh #!/usr/bin/env sh # 确保脚本抛出遇到的错误 set -e # 生成静态文件 npm run build # 进入生成的文件夹 cd public # 如果是发布到自定义域名 # echo 'www.yourwebsite.com' > CNAME git init git add -A git commit -m 'deploy' # 如果你想要部署到 https://USERNAME.github.io git push -f git@github.com:AirHua-byte/AirHua-byte.github.io.git master # 如果发布到 https://USERNAME.github.io/<REPO> REPO=github上的项目 # git push -f git@github.com:USERNAME/<REPO>.git master:gh-pages cd -
 2022-5-26
小程序组件-父子组件之间的通信
小程序组件-父子组件之间的通信
属性绑定 用于父组件向子组件的指定属性设置数据,仅能设置 JSON 兼容的数据 父组件的data data: { count: 99 }, 父组件的结构 <test4 ccount="{{count}}"></test4> <view> 数据:{{count}}</view> 子组件 /** * 组件的属性列表 */ properties: { ccount:Number }, 子组件的结构 <view>这是组件4</view> <view>父组件传递过来的数据:{{ccount}}</view> 事件绑定 用于子组件向父组件传递数据,可以传递任意数据 在父组件的 js 中,定义一个函数,这个函数即将通过自定义事件的形式,传递给子组件 syncount(e){ console.log(e.detail.value); this.setData({ count1:e.detail.value }) }, 在父组件的 wxml 中,通过自定义事件的形式,将步骤 1 中定义的函数引用,传递给子组件 {{count1}} <test5 bind:sync="syncount"></test5> 在子组件的 js 中,通过调用 this.triggerEvent('自定义事件名称', { / 参数对象 / }) ,将数据发送到父组件 addcount(){ this.setData({ count:this.data.count+1 }) // 调用父组件的sync函数 this.triggerEvent('sync',{value:this.data.count}) } 在父组件的 js 中,通过 e.detail 获取到子组件传递过来的数据 syncount(e){ console.log(e.detail.value); this.setData({ count1:e.detail.value }) },
 2022-5-26
小程序组件-插槽
小程序组件-插槽
什么是插槽 在自定义组件的 wxml 结构中,可以提供一个 slot 节点(插槽),用于承载组件使用者提供的 wxml 结构。 单个插槽 在小程序中,默认每个自定义组件中只允许使用一个 slot 进行占位,这种个数上的限制叫做单个插槽。 新建组件-在wxml中添加 <slot></slot> 在app.json里面定义组件 "usingComponents": { "test3":"/components/test3/test3" } 多个插槽 <slot name="a1"></slot> <slot name="a2"></slot> <slot name="a3"></slot> 在组件的js里面开启插槽 options:{ // 开启多个插槽 multipleSlots:true },
 2022-5-26
MyBatis动态SQL实现
MyBatis动态SQL实现
创建数据库 t_user库的名称 手动创建库 user 表名 /*SQLyog Ultimate v12.09 (64 bit) MySQL - 5.5.62 : Database - t_user ********************************************************************* */ /* !40101 SET NAMES utf8 */; /* !40101 SET SQL_MODE=''*/; /* !40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */; /* !40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */; /* !40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */; /* !40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */; CREATE DATABASE /* !32312 IF NOT EXISTS*/`t_user` /* !40100 DEFAULT CHARACTER SET utf8 COLLATE utf8_bin */; USE `t_user`; /*Table structure for table `user` */ DROP TABLE IF EXISTS `user`; CREATE TABLE `user` ( `id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(20) COLLATE utf8_bin DEFAULT NULL, `password` varchar(20) COLLATE utf8_bin DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=14 DEFAULT CHARSET=utf8 COLLATE=utf8_bin; /*Data for the table `user` */ insert into `user`(`id`,`username`,`password`) values (1,'tom1','123'), (2,'tom2','123'),(3,'tom3','123'),(4,'tom4','123'),(5,'tom5','123'), (6,'tom6','123'),(7,'tom7','123'),(8,'tom8','123'),(9,'tom9','123'), (10,'tom10','123'),(11,'tom11','123'),(12,'tom12','123'),(13,'tom13','123'); /* !40101 SET SQL_MODE=@OLD_SQL_MODE */; /* !40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */; /* !40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */; /* !40111 SET SQL_NOTES=@OLD_SQL_NOTES */; 根据用户名或密码查询 * 一个条件都没有 * 只有用户名,没有密码 * 用户名 和 密码 都有 编写接口Usermapper //条件 public List<User> findUserByUserNameOrPws(User user); 编写sql语句 usermapper.xml中 <!--条件查询--> <select id="findUserByUserNameOrPws" resultType="user" parameterType="user"> /*username 参数对象user 中的属性 */ select * from user <where> <if test="username!=null"> and username=#{username} </if> <if test="password !=null"> and password=#{password} </if> </where> </select> 测试代码 findUser()只看这个方法 package com.haha.controller; import com.haha.domian.User; import com.haha.mapper.UserMapper; import org.apache.ibatis.io.Resources; import org.apache.ibatis.session.SqlSession; import org.apache.ibatis.session.SqlSessionFactory; import org.apache.ibatis.session.SqlSessionFactoryBuilder; import java.io.File; import java.io.IOException; import java.io.InputStream; import java.util.List; public class TestMain { public static void main(String[] args) throws IOException { //1.查询所有数据 //list(); //2.查询数据 findUser(); } //条件查询用户 public static void findUser()throws IOException{ SqlSession sqlSession = getSqlSession(); UserMapper mapper = sqlSession.getMapper(UserMapper.class); User user=new User(); user.setUsername("tom10"); List<User> list = mapper.findUserByUserNameOrPws(user); System.out.println(list); } //查询所有数据 public static void list()throws IOException{ SqlSession sqlSession = getSqlSession(); UserMapper mapper = sqlSession.getMapper(UserMapper.class); List<User> all = mapper.findAll(); System.out.println(all); } //获取到sqlsession对象 public static SqlSession getSqlSession() throws IOException { InputStream resourceAsStream = Resources.getResourceAsStream("sqlMapConfig.xml"); SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(resourceAsStream); SqlSession sqlSession = sqlSessionFactory.openSession(); return sqlSession; } } 批量查询 例子: select * from user where id in(1,3,5,6) 编写接口 public List<User> findByIds(List<Integer> list); 编写sql语句 <!--批量查询 根据id--> <select id="findByIds" resultType="user" parameterType="list"> /*select * from user where id in (xx,xxx)*/ select * from user <where> <foreach collection="list" open="id in (" close=")" item="id" separator=","> #{id} </foreach> </where> </select> 测试代码 //批量查询id的值 public static void findUserByids()throws IOException{ SqlSession sqlSession = getSqlSession(); UserMapper mapper = sqlSession.getMapper(UserMapper.class); List<Integer> list=new ArrayList<>(); list.add(1); list.add(3); list.add(5); List<User> users = mapper.findByIds(list); System.out.println(users); }
 2022-5-13
uni-app请求封装
uni-app请求封装
案例简介 基于promise封装请求,使用async await语法糖,参考插件市场,插件ID:niudandan-promise 详细使用 api.js const BASE_URL = '你的域名'; export const myRequest = (options)=>{ let token = uni.getStorageSync('token') return new Promise((resolve,reject)=>{ uni.request({ url: BASE_URL + options.url, // 将接口地址分为两部分,这样如果域名改变了好维护,接口地址从options中获取 header: { token: token, } || {}, method: options.method || 'GET',//默认Get data: options.data || {},// data从options中获取,如果没有传入data, 则默认一个空对象 success: (res) => { if (res.data.code === 1401) { } else { res } resolve(res); }, fail: (err) => { uni.showToast({ title: '请求接口失败', }); reject(err); }, }); }) } main.js //这个方法可能每个页面都会用到,我们可以在main.js中引入, import {myRequest} from 'api.js' //接收之后,挂载到全局,这样所有的页面都可以调用这个方法 Vue.prototype.$myRequest = myRequest; 使用方法:使用this.$myRequest进行调用 <button type="submit" @click="test()">发送请求</button> methods: { async test() { const res = await this.$myRequest({ url: '/api.php' }) this.dataa = res.data } }
 2022-5-11
Vue安装命令
Vue安装命令
设置淘宝镜像源 npm config set registry https://registry.npm.taobao.org 查看使用的镜像源 npm config get registry 安装淘宝镜像源 npm install -g cnpm --registry=https://registry.npm.taobao.org 卸载 npm uninstall vue-cli –g 打开命令行工具,通过npm方式全局安装@vue/cli脚手架,具体命令如下: npm install @vue/cli@3.10 –g 安装完成后,检测是否安装成功,使用如下命令来查看vue-cli的版本号: vue –V(或者vue --version) 上述命令运行后,结果如下所示: C:\vue>vue -V 3.10.0 使用vue create命令创建项目 vue create hello-vue(项目名) 项目创建完成后,执行如下命令进入项目目录,启动项目。 cd hello-vue npm run serve 项目启动后,会默认启动一个本地服务,如下所示 App running at: Local: http://localhost:8080/
 2022-5-3
$.ajax()方法详解
$.ajax()方法详解
jquery中的ajax方法参数总是记不住,这里记录一下。   1.url:  要求为String类型的参数,(默认为当前页地址)发送请求的地址。 2.type:  要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持。 3.timeout:  要求为Number类型的参数,设置请求超时时间(毫秒)。此设置将覆盖$.ajaxSetup()方法的全局设置。 4.async:  要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为false。注意,同步请求将锁住浏览器,用户其他操作必须等待请求完成才可以执行。 5.cache:  要求为Boolean类型的参数,默认为true(当dataType为script时,默认为false),设置为false将不会从浏览器缓存中加载请求信息。 6.data:  要求为Object或String类型的参数,发送到服务器的数据。如果已经不是字符串,将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换,可以查看  processData选项。对象必须为key/value格式,例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组,JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。 7.dataType:  要求为String类型的参数,预期服务器返回的数据类型。如果不指定,JQuery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递。可用的类型如下: xml:返回XML文档,可用JQuery处理。 html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。 script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求。 json:返回JSON数据。 jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数。 text:返回纯文本字符串。 8.beforeSend: 要求为Function类型的参数,发送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。             function(XMLHttpRequest){                this;   //调用本次ajax请求时传递的options参数             } 9.complete: 要求为Function类型的参数,请求完成后调用的回调函数(请求成功或失败时均调用)。参数:XMLHttpRequest对象和一个描述成功请求类型的字符串。           function(XMLHttpRequest, textStatus){              this;    //调用本次ajax请求时传递的options参数           } 10.success:要求为Function类型的参数,请求成功后调用的回调函数,有两个参数。          (1)由服务器返回,并根据dataType参数进行处理后的数据。          (2)描述状态的字符串。          function(data, textStatus){             //data可能是xmlDoc、jsonObj、html、text等等             this;  //调用本次ajax请求时传递的options参数          } 11.error: 要求为Function类型的参数,请求失败时被调用的函数。该函数有3个参数,即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下:        function(XMLHttpRequest, textStatus, errorThrown){           //通常情况下textStatus和errorThrown只有其中一个包含信息           this;   //调用本次ajax请求时传递的options参数        } 12.contentType: 要求为String类型的参数,当发送信息至服务器时,内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。 13.dataFilter: 要求为Function类型的参数,给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。             function(data, type){                 //返回处理后的数据                 return data;             } 14.dataFilter: 要求为Function类型的参数,给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。             function(data, type){                 //返回处理后的数据                 return data;             } 15.global: 要求为Boolean类型的参数,默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件,ajaxStart或ajaxStop可用于控制各种ajax事件。 16.ifModified: 要求为Boolean类型的参数,默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false,即忽略头信息。 17.jsonp: 要求为String类型的参数,在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分,例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。 18.username: 要求为String类型的参数,用于响应HTTP访问认证请求的用户名。 19.password: 要求为String类型的参数,用于响应HTTP访问认证请求的密码。 20.processData: 要求为Boolean类型的参数,默认为true。默认情况下,发送的数据将被转换为对象(从技术角度来讲并非字符串)以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息,请设置为false。 21.scriptCharset: 要求为String类型的参数,只有当请求时dataType为"jsonp"或者"script",并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。 案例代码: $(function(){ $('#send').click(function(){ $.ajax({ type: "GET", url: "test.json", data: {username:$("#username").val(), content:$("#content").val()}, dataType: "json", success: function(data){ $('#resText').empty(); //清空resText里面的所有内容 var html = ''; $.each(data, function(commentIndex, comment){ html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para"' + comment['content'] + '</p></div>'; }); $('#resText').html(html); } }); }); }); 22.顺便说一下$.each()函数: $.each()函数不同于JQuery对象的each()方法,它是一个全局函数,不操作JQuery对象,而是以一个数组或者对象作为第1个参数,以一个回调函数作为第2个参数。回调函数拥有两个参数:第1个为对象的成员或数组的索引,第2个为对应变量或内容。   作者:Tyler Ning 
 2021-11-17
    代码
    下载
    软件
    工具
    SSM
    Vuex
    递归算法
    缓存
    插槽
    Mybatis
    弹性布局
    教程
    服务端
    emlog
    Mac
    测试
    笔记
    Servlet
    爬虫
    说说
    伪静态
    铭记
    数据库
    QQ小程序
    robots
    Json
    表单提交
    源码
    正则表达式
    图片上传
    promise
    代码高亮
    九一八事变
    Emlog小程序
    图形
    铭记国耻
    邮箱验证
    Brief
    页面
    模板
    心情
    MYSQL
    内容安全
    PHP
    Es6
    Downie4
    Python
    HTML
    编程
    插件
    VUE
    安装
    jQuery
    自动化测试
    IO流
    Spring-MVC
    三层架构
    nodejs
    墨菲定律
    javaScript
    SEO
    QQ
    微信小程序
    uniapp
    系统
    Java
    轮播图
    SQL
    Vue脚手架
    小程序
    PhotoShop
    ajax
    封装
    组件
    前端
    web
    css
    Fabric
    箭头函数
    事件
    新拟态效果
    电脑
    空间
    node
    晚安心语
    表白墙
    QQx
    Spring
    JSP
    PS
    VuePress
    js
    文章
    axios
    名片赞助手
    教学
    微信

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

标签