轻功水上喵丶的博客

遍历数据时，由于前端使用的是html+jQuery（用vue.js多香），返回的数据有0和1时，需要进行格式化的显示，参考了很多方法，终于实现了，记录一下，希望对大家有帮助直接上js代码，都在注释里了 formatter() { //获取后端获取的参数 var state = this.rowMain.state; var type = this.rowMain.type; //获取表id为baseTable的行，返回的是一个数组 var

在开发过程中可能根据需要设置一个默认的时间段，在网上看了很多相关的信息，大多数都显得很笼统并且麻烦，研究了一下el-date-picker 插件的属性，发现了一个比较简单的方法，来跟大家分享一下。1.需求分析当用户打开某一个需要查询数据的页面时，插件默认显示上一个月的时间，如当前三月则需要显示二月份：考虑到每一个月的天数不一定，但是每一个月都是从一号开始，所以只要终止日期小于下一个月1号就...

页面代码均为最终代码嵌套布局与标签导航嵌套布局（1）创建pages/qa.vue<template> <div> <div class="tab-nav "> <div class="wrapper"> <ul class="fl sui-nav nav-tabs navbar-dark">...

一、页面构建新建一个pages/login/index.vue页面以下页面为最终完成的页面，如果你是从第一步开始，部分模块可能尚未添加，建议先浏览全文<template><div> <header class="head-login"> <div class="wrapper"> <div class="sui-n...

一、吐槽列表页1.吐槽列表页数据渲染吐槽列表页已经构建，我们现在来实现数据的渲染（1）easyMock模拟数据URL: spit/search/{page}/{size}Method: post{ "code": 20000, "flag": true, "message": "查询成功", "data": { "total": "@integer(60, 100)", ...

发布吐槽1.构建页面我们这里用到VUE常用的富文本编辑器vue-quill-editor详见文档： https://www.npmjs.com/package/vue-quill-editor（1）安装vue-quill-editoryarn add vue-quill-editor（2）plugins下创建nuxt-quill-plugin.jsimport Vue from 'v...

一、 招聘列表页1.编写API方法（1）将管理后台的api/recruit.js和api/enterprise.js 拷贝到当前工程的api文件夹下（2）修改api/recruit.js，增加方法 recommend() { return request({ url: `/${group_name}/search/recommend`, method: 'get'...

一、活动列表页1.数据渲染（1）创建utils文件夹，utils下创建request.js ，用于封装axios（2）创建api文件夹，将管理后台工程的api/gathering.js 拷贝到api文件夹（3）修改pages/gathering/index.vue<template> <div> <div class="wrapper activit...

一、NUXT简介Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。官网地址：https://zh.nuxtjs.org/二、NUXT环境搭建（1）前提确保安装了npx（npx自npm 以来默认发货5.2.0）（2）在cmd界面运行npx create-nuxt...

一、网站布局（1）拷贝静态资源：将静态原型中的css、img、plugins目录拷贝至assets目录下 。（2）我们参照静态原型中的activiti-index.html页面来编写网站的通用布局，即网站的头部和尾部修改layouts下的default.vue，内容如下：<template> <div> <header> <di...

一、Vuex简介Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。快速理解：每个组件都有它自己数据属性，封装在data()中，每个组件之间data是完全隔离的，是私有的。如果我们需要各个组件都能访问到数据数据，或是需要各个组件之间能互相交换数据，这就需要一个单独存储的区域存放公共属性。这就...

一、代码生成使用黑马程序员代码生成器选中vue2+ElementUI点击代码生成：可以在目录下看到将api目录下生成的文件复制到我们正在开发工程的相应目录中：将views\table目录下生成的视图复制到我们正在开发工程的相应目录中：注：无法复制到Vscode中，请复制到相应的文件夹二、路由设置 { path: '/recruit', compone...

一、准备工作1.代码生成（1）使用《黑马程序员代码生成器》，连接数据库tensquare_article（2）将api 与vue页面拷贝到当前工程2.路由设置 { path: '/article', component: Layout, name: 'article', meta: { title: '文章管理', icon: 'example' }, ...

一、准备工作将swaggerAPI同步到easyMock 然后修改/gathering/gathering （GET方法）的内容{ "code": 20000, "flag": true, "message": "@string", "data|10": [{ "id": "@string", "name": "@cword(8,12)", "summary": "@cwo...

一、增加1.对话框（1）修改src/api/gathering.js，在template中增加对话框组件 <el-dialog title="活动编辑" :visible.sync="dialogFormVisible" ></el-dialog>属性title为对话框标题， visible为是否显示。（2）变量dialogFormVisible用...

一、管理后台搭建1.下载管理后台的模板下载地址2. 解压vueAdmin-template-master3.输入npm install这样下载安装所有的依赖，几分钟后下载完成。4输入命令：npm run dev运行后自动弹出浏览器,可以看到如下页面：可以登录进去查看里面的结构4.工程结构：5.用VCcode打开这个工程修改main.js：二、与easy-mock对接...

一、 SwaggerEditor安装与启动1.前往github下载SwaggerEditor，下载地址SwaggerEditorr2.将下载的zip文件解压，在命令行中进入SwaggerEditor目录3. 全局安装http-server(http-server是一个简单的零配置命令行http服务器)npm install -g http-server4. 启动swagger-edito...

一、Mock.js简介Mock.js （官网http://mockjs.com/）是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：根据数据模板生成模拟数据模拟 Ajax 请求，生成并返回模拟数据基于 HTML 模板生成模拟数据Mock.js具有以下特点：前后端分离让前端攻城师独立于后端进行开发。增加单元测试的真实性通过随机数...

一、Mock.js简介Mock.js （官网http://mockjs.com/）是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：根据数据模板生成模拟数据模-拟 Ajax 请求，生成并返回模拟数据基于 HTML 模板生成模拟数据...

今天使用 Spring JDBC Template 时出现了一个错误：Incorrect column count: expected 1, actual 24字面上的意思大概是本应只返回一列，但是实际上返回了24列需求根据某个ID返回某一条数据，这数据存在于一个对象中错误原因分析最开始的写法是这样的：return jdbcTemplate.queryForObject(sql, ...

一、Jenkins简介Jenkins是一个开源的、可扩展的持续集成、交付、部署（软件/代码的编译、打包、部署）的基于web界面的平台。允许持续集成和持续交付项目，无论用的是什么平台，可以处理任何类型的构建或持续集成。官网：https://jenkins.io/ 官方文档：https://jenkins.io/doc/二、特点易安装：仅仅一个 java -jar jenkins.war，从...

一、dockerfile1、简介Dockerfile是由一系列命令和参数构成的脚本，这些命令应用于基础镜像并最终创建一个新的镜像。1、对于开发人员：可以为开发团队提供一个完全一致的开发环境；2、对于测试人员：可以直接拿开发时所构建的镜像或者通过Dockerfile文件构建一个新的镜像开始工作了；3、对于运维人员：在部署时，可以实现应用的无缝移植。2、常用语法命令命令作用例...

一、配置组件SpringCloudConfig简介在分布式系统中，由于服务数量巨多，为了方便服务配置文件统一管理，实时更新，所以需要分布式配置中心组件。在Spring Cloud中，有分布式配置中心组件spring cloudconfig ，它支持配置服务放在配置服务的内存中（即本地），也支持放在远程Git仓库中。在spring cloud config 组件中，分两个角色，一是config s...

一、熔断器1.为什么要使用熔断器？在微服务架构中通常会有多个服务层调用，基础服务的故障可能会导致级联故障，进而造成整个系统不可用的情况，这种现象被称为服务雪崩效应。服务雪崩效应是一种因“服务提供者”的不可用导致“服务消费者”的不可用,并将不可用逐渐放大的过程。如果下图所示：A作为服务提供者，B为A的服务消费者，C和D是B的服务消费者。A不可用引起了B的不可用，并将不可用像滚雪球一样放大到C和...

一、需求分析交友微服务本身的功能:（1）当用户登陆后在推荐好友列表中点击“心”，表示喜欢此人 ，在数据库tb_friend表中插入一条数据，islike 为0（2）当你点击了喜欢过的人，也喜欢了你 , 表示互粉成功！也向tb_friend表中插入一条数据，islike为1 ，并且将你喜欢她的数据islike也修改为1（3）当你点击了不喜欢某人（点击了叉），向tb_nofriend添加记录....

一、鉴权工具类（1）tensquare_common工程引入依赖（考虑到工具类的通用性） <dependency> <groupId>io.jsonwebtoken</groupId> <artifactId>jjwt</artifactId> &l...

今天在centos7上安装Nginx遇到了不少麻烦，综合网上的步骤总了总结，希望能够帮助到大家一.安装环境1.安装GCCNginx是C语言开发的，所以需要安装一个可以供C语言运行的环境gcc-c++，中端下输入yum install gcc-c++2.安装PCREPCRE(Perl Compatible Regular Expressions中文含义：perl语言兼容正则表达式)是一...

一、Eureka服务端开发（1）创建tensquare_eureka模块（2）引入依赖 父工程pom.xml定义SpringCloud版本 <dependencyManagement> <dependencies> <dependency> <groupId>org....

一、HTTP Basic AuthHTTP Basic Auth简单点说明就是每次请求API时都提供用户的username和password，简言之，Basic Auth是配合RESTful API 使用的最简单的认证方式，只需提供用户名密码即可，但由于有把用户名密码暴露给第三方客户端的风险，在生产环境下被使用的越来越少。因此，在开发对外开放的RESTful API时，尽量避免采用HTTP Ba...

一、准备工作Spring Security提供了BCryptPasswordEncoder类,实现Spring的PasswordEncoder接口使用BCrypt强哈希方法来加密密码。BCrypt使用强哈希方法使得每次加密的结果都不一样，这与MD5不同，MD5只要明文相同，加密出来的密文也会是相同的。（1）tensquare_user工程的pom引入依赖 <dependency&...

一、工程搭建（1）创建工程模块：tensquare_sms，pom.xml引入依赖 <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-...

一、docker安装RabbitMQ下载镜像docker pull rabbitmq:management创建容器rabbitmq需要有映射以下端口:5671、5672、4369、15671、15672、2567215672 (if management plugin is enabled)15671 management监听端口5672, 5671 (AMQP 0-9-1...

一、Elasticsearch（1）下载镜像docker pull elasticsearch:5.6.8（2）创建容器docker run -di --name=tensquare_elasticsearch -p 9200:9200 -p 9300:9300 elasticsearch:5.6.8（3）浏览器输入地址：http://192.168.192.130:9200/ 可以...

一、构建模块1.构建搜索微服务子模块（1）创建模块tensquare_search ，pom.xml引入依赖 <dependencies> <dependency> <groupId>org.springframework.data</groupId> <artifac...

学习十次方项目时用到了KI分词器，单独记录过程一、IK分词器安装下载地址：https://github.com/medcl/elasticsearch-analysis-ik/releases 下载5.6.8版（1）先将其解压，将解压后的elasticsearch文件夹重命名文件夹为ik（2）将ik文件夹拷贝到elasticsearch/plugins 目录下。（3）重新启动elasti...

开发黑马程序员十次方项目时需要学习到的点，单独记录一、ElasticSearch简介什么是ElasticSearchElasticsearch是一个实时的分布式搜索和分析引擎。它可以帮助你用前所未有的速度去处理大规模数据。ElasticSearch是一个基于Lucene的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎，基于RESTful web接口。Elasticsearch是...

一、增加评论修改tensquare_article工程的pom.xml<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring‐boot‐starter‐data‐mongodb</artifactId></dependenc...

最近需要对接支付宝的支付接口，官方文档写得内容有点分散，整理了一下发布出来，用作记录，同时也希望对不了解情况的人有所帮助，这里以电脑端的网页支付为例。开发主要分为三个步骤：一、生成私钥公钥。二、建立应用。三、沙箱环境。四、接口开发一、生成私钥公钥生成密钥的官网文档：官网文档官方文档讲得已经很详细，按照步骤来即可，记得保存好公钥与私钥，下面需要用到二、建立应用1.首先进入蚂蚁金服的首页，...

一、docker下安装MongoDB1.安装mongodb镜像docker pull mongo2.创建一个mongoDB容器docker run -di --name=tensquare_mongo -p 27017:27017 mongo3.远程登录mongo 192.168.192.130二、编写吐槽微服务代码搭建子模块 tensquare_spit在pom.xml文件中...

一、活动微服务代码生成（1）使用代码生成器生成招聘微服务代码 tensquare_gathering（2）拷贝到当前工程，并在父工程引入。（3）修改Application类名称为GatheringApplication（4）修改application.yml 中的端口为9005 ,url 为jdbc:mysql://192.168.192.130:3306/tensquare_gathe...

1.代码生成1）使用代码生成器生成招聘微服务代码 tensquare_article（2）拷贝到当前工程，并在父工程引入。（3）修改Application类名称为ArticleApplication（4）修改application.yml 中的端口为9004 ,url 为jdbc:mysql://192.168.192.130:3306/tensquare_article?charact...

生成代码（生成方法参考四）（1）使用代码生成器生成招聘微服务代码 tensquare_qa（2）拷贝到当前工程，并在父工程引入。（3）修改Application类名称为QaApplication（4）修改application.yml 中的端口为9003 ,url 为jdbc:mysql://192.168.184.134:3306/tensquare_qa?characterEnc...

1.打开代码生成器填写好自己的数据库服务器信息点击测试连接，连接成功后可以选择相应的数据库：选择tensquare_recruit数据库，点击下一步，输入一下信息：注意选择正确的模板，结构文档生成路径可以不用管，代码生成路径选一个没有中文和空格的文件夹就好，填好后点击生成代码，可以在之前生成的代码路径下看到一个文件夹：这和我们的父工程的一直，点开就会发现还生成了我们之前的comm...

1.按照之前的步骤，新建一个tensquare_base子模块2.修改tensquare_base的pom.xml文件，添加如下依赖： <dependencies> <dependency> <groupId>org.springframework.boot</groupId> ...

一、搭建父工程tensquare_parent1.选择菜单file-new project ,弹出窗口中左侧菜单选择Maven ，点击next按钮2.按照下图输入相关信息：选择路径后点击finish3.删除tenquare_parent的src文件夹，只留下一个pom.xml文件4.修改pom.xml文件<?xml version="1.0" encoding="UTF-8"...

今天在撸代码时，将微服务打包到docker时出现一个异常：百度上找了很多相关资料终于得已解决，先进行一个简单的总结：1.首先要配置一个用于HTTPS加密的证书一次在docker的虚拟机中输入以下内容openssl genrsa -aes256 -out ca-key.pem 4096openssl req -new -x509 -days 3650 -key ca-key.pem -s...

今天开发时，使用axios返回的response中data有多个数据：如果是获取cn里的数据的，可以用：response.data.cn但是需求是根据选择来获取数据的，会发生变化，最开始的想法是，用一个变量来记录需要获取的key:假设need是需要获取的某个keyconst dkey = this.need;response.data.dkey这样发现获取不到数据，这是因为v...

一、安装在官方网站下载相应的安装包：下载地址选择响应的版本后一直点击next安装即可，也可以在安装时选择安装目录安装完成后在cmd命令行下输入node -v 可以看到相应版本则安装成功二、构建一个服务器应用主要步骤：（1）引入required模块：我们可以使用require指令来载入Node.js模块。（2）创建服务器：服务器可以监听客户端的请求，类似于Apache 、Ng...

今天用Arrays.sort()进行降序排序出现了点小问题，特地来记录一下。遇到对数组进行升序或者降序排序的问题，其实Java语言提供给我们Array.sort(int [] arr)对数组进行升序排列，代码如下： public static void main(String[] args) { int[] a = {9, 8, 7, 2, 3, 4, 1, 0, 6, 5}...

现在大多数网站都需要用邮件进行验证，springboot对邮件服务进行了进程，我们可以很方便的使用它，一起来看看吧。首先新建一个springboot工程添加相关依赖修改pom.xml文件，添加相关依赖 <dependency> <groupId>org.springframework.boot</groupId> ...

1. 简介在这之前先简单介绍一下什么是AMQP和消息中间件：1.1 AMQPAMQP，即Advanced message Queuing Protocol，高级消息队列协议，是应用层协议的一个开放标准，为面向消息的中间件设计。消息中间件主要用于组件之间的解耦，消息的发送者无需知道消息使用者的存在，反之亦然。AMQP的主要特征是面向消息、队列、路由（包括点对点和发布/订阅）、可靠性、安全。...

1. 新建工程新建一个普通的springboot工程，在启动类的上方加上@EnableScheduling,表示开启定时任务package com.eknaij.schedulingtasks;import org.springframework.boot.SpringApplication;import org.springframework.boot.autoconfigure.Sp...

1. 准备springboot构建项目的基本知识thymeleaf的相关知识JDK1.8、idea20182. 新建工程2.1 修改pom.xml引入Thymeleaf、web相关依赖： <dependencies> <dependency> <groupId>org.springframework...

使用thymeleaf使用RESTful风格进行单条数据查询、修改信息查询遇到Whitelabel Error PageThis application has no explicit mapping for /error, so you are seeing this as a fallback.Mon Apr 08 17:47:47 CST 2019There was an un...

1. 准备JDK 1.8、IDEA2018.3.5、MongoDB 版本4.0.6、以及基本的springboot构建项目知识、thymeleaf相关知识，不了解的可以参考我之前的文章：thymeleaf入门2. MongnDB简单介绍MongoDB是基于文档的存储的（而非表），是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。他支持的数据结构非...

1.先决条件JDK1.8、JPA相关知识、Mysql相关知识、Thymeleaf相关知识、SpringBoot构建项目，不了解的朋友可以看一下我前面的博文。2.数据准备创建数据库和表create database thymeleaf;use thymeleaf;CREATE TABLE user (id int(11) NOT NULL AUTO_INCREMENT,name ...

1. Thymeleaf简单介绍Thymeleaf 与JSP类似，最大的区别在于，JSP在运行之后才能得纯HTML，而 Thymeleaf 在运行之前也是纯html。Thymeleaf跟 Velocity、FreeMarker 等模板引擎大同小异 ，相较与其他的模板引擎，它有如下三个极吸引人的特点：1.Thymeleaf 在有网络和无网络的环境下皆可运行。它可以让在浏览器查看页面的静态效果，也...

1.Redis简单介绍REmote DIctionary Server(Redis) 是一个由Salvatore Sanfilippo写的key-value存储系统。Redis是一个开源的使用ANSI C语言编写、遵守BSD协议、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库，并提供多种语言的API。它通常被称为数据结构服务器，因为值（value）可以是 字符串(Strin...

1. RESTful风格介绍RESTful架构风格是目前最流行的一种架构风格，它机构清晰、符合标准、易于理解、扩展方便，所以在Web开发中经常被使用。REST，全称是Representational State Transfer，译作“表现层状态转化”，在 2000 年 Roy Fielding 的博士论文中首次被提出。面向资源是REST明显的特征，对于同一个资源的一组不同的操作。资源是服务器...

1.环境准备JDK1.8 、IDEA2018 、 Mysql8.0.152.新建一个数据库创建数据库create database testmybatis;创建表use testmybatis;CREATE TABLE category_ ( id int(11) NOT NULL AUTO_INCREMENT, name varchar(30), PRIMARY K...

1. 基于之前如果没有接触过JPA请先移步2.修改CategoryController为CategoryController添加： 增加、删除、获取、修改映射package com.eknaij.springbootjpa.controller;import com.eknaij.springbootjpa.dao.CategoryDAO;import com.eknaij.spri...

1.JPA简介JPA(Java Persistence API)是Sun官方提出的Java持久化规范，用来方便大家操作数据库。真正干活的可能是Hibernate,TopLink等等实现了JPA规范的不同厂商,默认是Hibernate。本知识演示如何在Springboot中快捷方便地使用JPA。2.环境准备JDK1.8 、IDEA 2018 、Maven 3.5 、Mysql8.0.15...

1.环境准备JDK1.8IDEA 2018Maven 3.52.新建项目New一个project，我们要新建的是springBoot工程在左边的列表选择Spring Initiazr点击Next之后进入下面界面在红色框标记的地方填入项目信息后点击Next在这个页面你可以选择一些需要的依赖，以及springboot的版本。在这里我们选上web依赖，springboot的版本选2...

1.先去oracle官网下载JDK1.8，JDK下载地址进入后可以看到如下页面：记得要先点击Accept License Agreement ，这样才能下载。选择相应的版本，我的系统是64位的，所以选择Linux x64的tar.gz后缀的版本2.解压Ctrl + Alt+T打开终端，进入刚才下载JDK1.8的目录，我刚才下载时放在了默认的下载文件夹中，所以直接进入下载文件夹，输入命令l...