Lcy2e

微服务[学成在线] day02：CMS前端开发

写在前面

我为什么要花时间去写这个笔记？

由于在学习该项目的过程中发现了原讲义存在的一些问题，所以该笔记基于「学成在线」微服务项目 PDF 讲义进行编写，并且投入了时间去优化了笔记的格式、代码的高亮、重点的标记等。

以及一些原讲义中所描述的一些知识点使我无法理解的内容，我会对这些内容的表达方式进行修改或者提出一些问题，并且用我自己所理解的一些想法去重新的解释这个问题。

总结一下原 PDF 讲义中已知的一些问题：

从 PDF 中复制出来的代码，部分特殊符号的编码有问题，并且不易被发现，例如横杠 -，从PDF直接复制出来的话是无法运行的。
有时候一些重复且简单的代码，我们需要直接从讲义中直接复制，而部分PDF编辑器复制出来的代码格式可能会变乱，且PDF中没有代码高亮，代码可阅读性差，并且复制出来时会有代码缩进错乱等问题。
部分内容是重点但在讲义中只是简单的描述，这并不方便我们后期回顾该课程的知识点，所以我在一些重点的内容上加上了更多的解释。

如有不足的地方，欢迎小伙伴们补充、填坑。

知识点概览

为了方便后续回顾该项目时能够清晰的知道本章节讲了哪些内容，并且能够从该章节的笔记中得到一些帮助，所以在完成本章节的学习后在此对本章节所涉及到的知识点进行总结概述。

本章节为【学成在线】项目的 day02 的内容

vue 基础语法
对 webpack与 webpack-dev-server 的基本使用，理解 webpack 的打包过程。
CMS 前端工程的基础构建
解决前端跨域请求的问题，并理解前端请求数据的流程。
配合使用 Element-UI 的 table 组件进行分页查询

一、vue基础

vue基础部分内容的笔记略过，如过你仍需要该阶段的学习，阅读官方的讲义或者移步：https://cn.vuejs.org/v2/guide/ 进行阅读和练习。

二、webpack入门

0x01 概述

使用vue.js开发大型应用需要使用 webpack 打包工具，本节研究webpack的使用方法。

Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。

0x02 使用webpack有什么好处呢？

从图中我们可以看出，Webpack 可以将js、css、png等多种静态资源进行打包

模块化开发
程序员在开发时可以分模块创建不同的js、 css等小文件方便开发，最后使用webpack将这些小文件打包成一个文
件，减少了http的请求次数。
webpack可以实现按需打包，为了避免出现打包文件过大可以打包成多个文件。
编译typescript、ES6等高级js语法
随着前端技术的强大，开发中可以使用javascript的很多高级版本，比如：typescript、ES6等，方便开发，
webpack可以将打包文件转换成浏览器可识别的js语法。
CSS预编译
webpack允许在开发中使用Sass 和 Less等原生CSS的扩展技术，通过sass-loader、less-loader将Sass 和 Less的
语法编译成浏览器可识别的css语法。

0x03 webpack的缺点

1、配置有些繁琐
2、文档不丰富

0x04 安装 npm

node.js 已经集成了npm工具，在命令提示符输入 npm -v 可查看当前npm版本，node可以直接去官网下载安装

设置包路径

npm config set prefix "C:\Program Files\nodejs\npm_modules"
npm config set cache "c:\Program Files\nodejs\npm_cache"

0x05 安装 cnpm

执行以下命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成后执行命令 cnpm -v

0x03 安装 webpack

node.js 安装包分为两种模式

本地安装：仅将webpack安装在当前项目的node_modules目录中，仅对当前项目有效。
全局安装：将webpack安装在本机，对所有项目有效，全局安装会锁定一个webpack版本，该版本可能不适用某个项目。全局安装需要添加 -g 参数

本地安装

npm install --save-dev webpack 或 cnpm install --save-dev webpack
npm install --save-dev webpack-cli (4.0以后的版本需要安装webpack-cli)

全局安装

全局安装加-g，如下：全局安装就将webpack的js包下载到npm的包路径下。

npm install webpack -g 或 cnpm install webpack -g

安装 webpack 指定的版本：
进入webpacktest测试目录，运行：cnpm install --save-dev [email protected]
全局安装：npm install [email protected] -g 或 cnpm install [email protected] -g

0x07 入门程序

通过本入门程序体会webpack打包的过程及模块化开发的思想。

需求分析

通过入门程序实现对js文件的打包，体会webpack是如何对应用进行模块化管理。
对上边1+1=2的例子使用webpack进行模块化管理

定义 model01.js

在webpacktest01目录下创建model01.js

将本程序使用的加法运算的js方法抽取到一个js文件，此文件就是一个模块，代码如下

//定义add函数
function add(x, y) {
    return x+y;
}

//导出add函数
module.exports.add = add;

定义main.js

在webpacktest01目录下创建main.js，main.js是本程序的js主文件，包括如下内容：

1、在此文件中会引用model01.js模块
2、引用vue.min.js（它也一个模块）
3、将html页面中构建vue实例的代码放在main.js中。

var {add} = require("./model01.js")
var Vue = require("./vue.min")

// 实例化Vue对象
//vm :叫做MVVM中的 View Model
var VM = new Vue({
    el:"#app",//表示当前vue对象接管app的div区域
    data:{
        name:'黑马程序员',// 相当于是MVVM中的Model这个角色
        num1:0,
        num2:0,
        result:0,
        url:'http://www.itcast.cn'
    },
    methods:{
        change:function(){
            this.result = add(Number.parseInt(this.num1),Number.parseInt(this.num2));
        }
    }
});

打包测试

上边将 mode01.js 模块及 main.js 主文件编写完成，下边使用 webpack 对这些js文件进行打包

1、进入程序目录，执行 webpack main.js -o build.js ，这段指令表示将 main.js 打包输出为 build.js 文件执行完成，观察程序目录是否出现 build.js。

2、在创建一个html ，这里我命名为 vue_02.html 并中引用 build.js

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>vue.js入门程序</title>
</head>
<body>
<div id="app">
    {{name}}
    <input type="text" v-model="num1">+
    <input type="text" v-model="num2">=
    <input type="text" v-model="result">
    <button v-on:click="change">计算</button>
</div>
</body>
<script src="build.js"></script>
</html>

运行html

三、webpack-dev-server

0x01 测试环境搭建

webpack-dev-server 开发服务器，它的功能可以实现热加载并且自动刷新浏览器。

创建一个新的程序目录，这里我们创建 webpacktest02 目录，将 webpack 入门程序( webpacktest01 )的代码拷贝进来，并在目录下创建 src 目录、dist 目录，并将main.js和model01.js拷贝到src目录。

0x02 安装配置

安装webpack-dev-server

使用 webpack-dev-server 需要安装webpack、 webpack-dev-server 和 html-webpack-plugin三个包。

cnpm install webpackwebpack-dev-server html-webpack-plugin

安装完成，会发现程序目录出现一个package.json文件，此文件中记录了程序的依赖。

配置webpack-dev-server

在package.json中配置script

"scripts": {
  "dev": "webpack-dev-server --inline --hot --open --port 5008"
}

–inline：自动刷新
–hot：热加载
–port：指定端口
–open：自动在默认浏览器打开
–host：可以指定服务器的 ip，不指定则为127.0.0.1，如果对外发布则填写公网ip地址

此时package.json的文件内容如下：

{
  "devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    "webpack-dev-server": "^3.10.3"
  },
  "scripts": {
    "dev": "webpack-dev-server --inline --hot --open --port 5008"
  }
}

devDependencies：开发人员在开发过程中所需要的依赖。
scripts：可执行的命令

0x03 webpack.config.js

在 webpacktest02 目录下创建 webpack.config.js， webpack.config.js 是 webpack 的配置文件。

在此文件中可以配置应用的入口文件、输出配置、插件等，其中要实现热加载自动刷新功能需要配置 html-webpack-plugin 插件。

html-webpack-plugin 的作用是根据 html 模板在内存生成 html 文件，它的工作原理是根据模板文件在内存中生成一个 index.html 文件。

配置模板文件

将原来的 vue_02.html 作为模板文件，为了和内存中的 index.html 文件名区别，注意将 vue_02.html 中的script 标签去掉，内容如下：


<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>vue.js入门程序title>
head>
<body>
<div id="app">
    {{name}}
    <input type="text" v-model="num1">+
    <input type="text" v-model="num2">=
<input type="text" v-model="result">
<button v-on:click="change">计算button>
div>
body>
html>

配置 html-webpack-plugin

在 webpack.config.js 中配置 html-webpack-plugin 插件

var htmlwp = require('html-webpack-plugin');
module.exports={
    entry:'./src/main.js', //指定打包的入口文件
    output:{
        path : __dirname + '/dist', // 注意：__dirname表示webpack.config.js所在目录的绝对路径
        filename:'build.js' //输出文件
    },
    plugins:[
        new htmlwp({
            //生成的页面标题首页
            title: '首页',
            //webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部才能实现自动刷新功能
            filename: 'index.html',
            //根据vue_02.html这个模板来生成(这个文件请程序员自己生成)
            template: 'vue_02.html'
        })
    ]
}

启动

启动文件：
1、进入 webpacktest02目录，执行npm run dev
2、使用webstorm，右键package.json文件，选择 “Show npm Scripts”

打开窗口：

双击 dev。
注意：dev 就是在 package.json 中配置的 webpack dev server 命令。
发现启动成功自动打开浏览器。
修改src中的任意文件内容，自动加载并刷新浏览器。

debug调试

使用了 webpack 之后就不能采用传统js的调试方法在 chrome 中打断点。

webpack 将多个源文件打包成一个文件，并且文件的内容产生了很大的变化，webpack 提供 devtool 进行调试，devtool 是基于 sourcemap 的方式，在调试时会生成一个 map 文件，其内容记录生成文件和源文件的内容映射，即生成文件中的哪个位置对应源文件中的哪个位置，有了 sourcemap 就可以在调试时看到源代码。

配置如下

1、在webpack.config.js中配置：

devtool: 'eval‐source‐map',

devtool: ‘eval‐source‐map’,

var htmlwp = require('html‐webpack‐plugin');
    module.exports={
    entry:'./src/main.js', //指定打包的入口文件
    output:{
    path : __dirname+'/dist', // 注意：__dirname表示webpack.config.js所在目录的绝对路径
    filename:'build.js' //输出文件
},
devtool: 'eval‐source‐map',
......

2、在js中跟踪代码的位置上添加debugger

一个例子：
在add方法中添加debugger

// 定义add函数
function add(x, y) {
    debugger
    return x + y
}

启动应用，刷新页面跟踪代码：
点击“计算” 即进入debugger代码位置，此时可以使用chrome进行调试了。

无法正常启动调试？

谷歌浏览器中先按下 F12 打开调试模式后在点击 计算 按钮进行触发代码中的 debugger

0x04 总结一些坑

如果你根据黑马官方的项目讲义进行配置，并且一些环境遇到 命令无法找到 ，不用怀疑，其实你的配置并没有错，因为黑马提供的PDF文档有的部分配置，大部分人都是直接复制的，而不会浪费时间去一个个的敲（也没必要）当你复制到 IDE 编辑器中的时候，看起来跟文档一点区别都没有，例如下面的例子：

从图片上可以看到，在IDE中看该配置没有任何问题，但是从外部的cmd中运行时，提示了未找到 webpack-dev-server 这个命令，但实际上博主已按网上的各种办法，例如将项目下的 node_modules 文件夹删除再重新 npm install --save 安装模块，但无果，仔细一看猜发现TM有其中一个横杠 - 不是正常的字符，导致无法找到该命令，原因猜测是该配置文件我是从讲义的PDF中直接复制导致的，但乍一眼看根本看不出问题。

建议用 JB系列的 IDE 替换项目文件夹下的 - 为 - （仔细一看，这两个杠还是优点区别的。。）

本篇笔记也已全部替换。。

启动成功，虽然踩坑花了不少时间，但是阅读错误信息的能力感觉提升了一些。

四、CMS前端工程创建

0x01 导入系统管理前端工程

CMS系统使用Vue-cli脚手架创建， Vue-cli是 Vue 官方提供的快速构建单页应用的脚手架，github地址：
https://github.com/vuejs/vue-cli（有兴趣的同学可以参考官方指导使用vue-cli创建前端工程），本项目对 Vue-cli创建的工程进行二次封装，下边介绍CMS工程的情况。

0x02 工程结构

如果我要基于Vue-Cli创建的工程进行开发还需要在它基础上作一些封装，导入课程资料中提供Vue-Cli封装工程。
资料/xc-ui-pc-sysmanage.7z 拷贝到UI工程目录中，并解压，用WebStorm打开 xc-ui-pc-sysmanage 目录。

package.json

package.json记录了工程所有依赖，及脚本命令：

开发使用：npm run dev
打包使用：npm run build

webpack.base.conf.js

webpack.base.conf.js 就是 webpack 的 webpack.config.js 配置文件，在此文件中配置了入口文件及各种Loader。webpack 是通过vue-load解析 .vue 文件，通过 css-load 打包 css 文件等。

main.js

main.js 是工程的入口文件，在此文件中加载了很多第三方组件，如：Element-UI、Base64、VueRouter 等。
index.html 是模板文件。

src目录

src目录下存放页面及js代码。

assets：存放一些静态文件，如图片。
base：存放基础组件
base/api：基础api接口
base/component：基础组件，被各各模块都使用的组件
base/router：总的路由配置，加载各模块的路由配置文件。
common：工具类
component：组件目录，本项目不用。
mock：存放前端单元测试方法。
module：存放各业务模块的页面和api方法。

下级目录以模块名命名，下边以cms举例：

cms/api：cms模块的api接口
cms/component：cms模块的组件
cms/page： cms模块的页面
cms/router：cms模块的路由配置
statics：存放第三方组件的静态资源
vuex：存放vuex文件，本项目不使用
static：与src的平级目录，此目录存放静态资源它与assets的区别在于，static目录中的文件不被webpack打包处理，会原样拷贝到dist目录下

0x03 单页面应用介绍

单页面应用的优缺点：

优点：
1、用户操作体验好，用户不用刷新页面，整个交互过程都是通过Ajax来操作。
2、适合前后端分离开发，服务端提供http接口，前端请求http接口获取数据，使用JS进行客户端渲染。

缺点：
1、首页加载慢
单页面应用会将js、 css打包成一个文件，在加载页面显示的时候加载打包文件，如果打包文件较大或者网速慢则
用户体验不好。

2、SEO不友好
SEO（Search Engine Optimization）为搜索引擎优化。它是一种利用搜索引擎的搜索规则来提高网站在搜索引擎
排名的方法。目前各家搜索引擎对JS支持不好，所以使用单页面应用将大大减少搜索引擎对网站的收录。

总结：本项目的门户、课程介绍不采用单页面应用架构去开发，对于需要用户登录的管理系统采用单页面开发。

五、CMS前端页面查询开发

0x01 页面原型

1、创建页面

页面结构

在model目录创建 cms模块的目录结构

在page目录新建page_list.vue，扩展名为.vue。
.vue文件的结构如下：

在页面的template中填写 “测试页面显示…”。
注意：template内容必须有一个根元素，否则vue会报错，这里我们在template标签内定义一个div。

页面路由

在 cms 目录下创建 page_list.vue 页面。
现在先配置路由，实现 url 访问到页面再进行内容完善与调试。

1、在cms的router下配置路由

import Home from '@/module/home/page/home.vue';
import page_list from '@/module/cms/page/page_list.vue';
    export default [{
        path: '/cms',
        component: Home,
        name: 'CMS内容管理',
        hidden: false,
        children:[
            {path:'/cms/page/list',name:'页面列表',component: page_list,hidden:false}
        ]
    }
]

2、在base目录下的router导入cms模块的路由

// // 导入路由规则
import HomeRouter from '@/module/home/router'
import CmsRouter from '@/module/cms/router'
// 合并路由规则
concat(HomeRouter)
concat(CmsRouter)

3、测试

启动工程，刷新页面，页面可以外正常浏览，并且看到“测试页面显示…”字样

2、Table组件测试

本功能实现的页面列表，用户可以进行分页查询、输入查询条件查询，通过查看 Element-UI 库，我们需要Table 表格、Form表单及Pagination 分页组件。

进入Element-UI官方，找到 Table 组件，拷贝源代码到 vue 页面中，如下：

测试：

通过查看代码发现，el-table 组件绑定了tableData模型数据，tableData模型数据在script标签中定义。

3、页面内容完善

根据需求完善页面内容，完善列表字段，添加分页组件。

测试

0x02 API调用

1、定义

在cms模块的 api 目录定义cms.js，
在 cms.js 中定义如下js方法，此方法实现 http 请求服务端页面查询接口。

//public是对axios的工具类封装，定义了http请求方法
import http from './../../../base/api/public'

//页面查询
export const page_list = (page,size,params) => {
    //定义方法，请求服务端查询接口
    return http.requestQuickGet('http://localhost:31001/cms/page/list/'+page+'/'+size)
}

axios实现了http方法的封装，vue.js 官方不再继续维护 vue-resource,推荐使用 axios。

2、调用

前端 page_list.vue 页面导入cms.js，调用js方法请求服务端页面查询接口。

请求的参数根据后端的 Swagger 文档进行配置 http://localhost:31001/swagger-ui.html

配置

0x03 跨域问题解决

测试上边的代理，结果报错如下：

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin
'http://localhost:11000' is therefore not allowed access.

原因：浏览器的同源策略不允许跨域访问，所谓同源策略是指协议、域名、端口相同。

解决：采用 proxyTable 解决。

proxyTable 是什么？

vue-cli提供的解决vue开发环境下跨域问题的方法，proxyTable的底层使用了 http-proxymiddleware（https://github.com/chimurai/http-proxy-middleware），它是http代理中间件，它依赖 node.js，
基本原理是用服务端代理解决浏览器跨域：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hUU8JtHj-1595563918814)(C:\Users\root\AppData\Roaming\Typora\typora-user-images\image-20200319111906042.png)]

cms跨域解决原理：

1、访问页面http://localhost:11000/

2、页面请求http://localhost:11000/cms

由于url由http://localhost:31001/cms…改为“http://localhost:11000/cms."，所以不存在跨域

3、通过proxyTable由node服务器代理请求 http://localhost:31001/cms.

服务端不存在跨域问题

具体的配置如下：

1、修改api方法中url的定义

请求前加/api前缀

//public是对axios的工具类封装，定义了http请求方法
import http from './../../../base/api/public'  //ES6 导入
let sysConfig = require('@/../config/sysConfig')
let apiUrl = sysConfig.xcApiUrlPre
//页面查询
export const page_list = (page,size,params) => {
  //定义方法，请求服务端查询接口
  return http.requestQuickGet(apiUrl + '/cms/page/list/'+page+'/'+size)
}

2、在 config/index.js 下配置 proxyTable

'/api/cms': {
    target: 'http://localhost:31001',
    pathRewrite: {
    '^/api': ''//实际请求去掉/api
}

0x04 分页查询测试

1、定义分页视图

2、定义数据模型对象

 data() {
      return {
        list:[],
        total:0,  //数据总量
        params:{
          page:1,//默认页码
          size:10//默认每页显示个数
        }
      }
 },

3、定义分页方法，接收页码参数

      //触发分页参数变动
      handleSizeChange(val) {
        this.params.size = val
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.params.page = val
        console.log(`当前页: ${val}`);
      },

      //分页查询，接收page页码
      changePage(){
        this.query()
      },

      //查询
      query:function () {
        //调用服务端接口
        cmsApi.page_list(this.params.page, this.params.size).then((res) =>{
          //将res结果数据赋值给数据模型对象
          this.list = res.queryResult.list
          this.total = res.queryResult.total
        })
      }

修改完毕，分页测试效果如下

0x05 进入页面立即查询

目前实现的功能是进入页面点击查询按钮向服务端表求查询，实际的需求是进入页面立即查询。

那么如何实现？

这要用到 vue 的钩子函数，每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

通常使用最多的是 created 和 mounted 两个钩子：

created：vue实例已创建但是DOM元素还没有渲染生成。

mounted：DOM元素渲染生成完成后调用。

本例子在两个方法的任意一个都满足需求：

添加如下代码：

mounted() {
    //默认查询页面
    this.query()
}

重新刷新页面。

六、前端请求响应流程小结

参考 “讲义–>前后端请求响应流程.png”，如下：

根据图中所示，我们总结流程如下：

1、在浏览器输入前端url

2、前端框架 vue.js 根据 url 解析路由，根据路由找到 page_list.vue 页面

3、首先执行 page_list.vue 中的钩子方法

4、在钩子方法中调用 query 方法。

5、在 query 方法中调用 cms.js 中的 page_list 方法

6、cms.js 中的 page_list 方法通过 axios 请求服务端接口

7、采用 proxyTable 解决跨域问题，node.js 将请求转发到服务端(http://localhost:31001/cms/page/list)

8、服务端处理，将查询结果响应给前端

9、成功响应调用 then 方法，在 then 方法中处理响应结果，将查询结果赋值给数据模型中的total和list变量。

10、vue.js 通过双向数据绑定将list数据渲染输出。

认识作者

作者： LCyee ，全干型代码

自建博客：https://www.codeyee.com

记录学习以及项目开发过程中的笔记与心得，记录认知迭代的过程，分享想法与观点。

CSDN 博客：https://blog.csdn.net/codeyee

记录和分享一些开发过程中遇到的问题以及解决的思路。

欢迎加入微服务练习生的队伍，一起交流项目学习过程中的一些问题、分享学习心得等，不定期组织一起刷题、刷项目，共同见证成长。

你可能感兴趣的:(微服务项目学习,spring,boot,vue,java,web)

element实现动态路由+面包屑软件技术NINI vue案例 vue.js 前端
el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
微服务下功能权限与数据权限的设计与实现 nbsaas-boot 微服务 java 架构
在微服务架构下，系统的功能权限和数据权限控制显得尤为重要。随着系统规模的扩大和微服务数量的增加，如何保证不同用户和服务之间的访问权限准确、细粒度地控制，成为设计安全策略的关键。本文将讨论如何在微服务体系中设计和实现功能权限与数据权限控制。1.功能权限与数据权限的定义功能权限：指用户或系统角色对特定功能的访问权限。通常是某个用户角色能否执行某个操作，比如查看订单、创建订单、修改用户资料等。数据权限：
理解Gunicorn：Python WSGI服务器的基石范范0825 ipython linux 运维
理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico
Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
LocalDateTime 转 String igotyback java 开发语言
importjava.time.LocalDateTime;importjava.time.format.DateTimeFormatter;publicclassMain{publicstaticvoidmain(String[]args){//获取当前时间LocalDateTimenow=LocalDateTime.now();//定义日期格式化器DateTimeFormatterformat
Linux下QT开发的动态库界面弹出操作（SDL2） 13jjyao QT类 qt 开发语言 sdl2 linux
需求：操作系统为linux，开发框架为qt，做成需带界面的qt动态库，调用方为java等非qt程序难点：调用方为java等非qt程序，也就是说调用方肯定不带QApplication::exec()，缺少了这个，QTimer等事件和QT创建的窗口将不能弹出(包括opencv也是不能弹出)；这与qt调用本身qt库是有本质的区别的思路：1.调用方缺QApplication::exec()，那么我们在接口
腾讯云技术深度探索：构建高效云原生微服务架构我的运维人生云原生架构腾讯云运维开发技术共享
腾讯云技术深度探索：构建高效云原生微服务架构在当今快速发展的技术环境中，云原生技术已成为企业数字化转型的关键驱动力。腾讯云作为行业领先的云服务提供商，不断推出创新的产品和技术，助力企业构建高效、可扩展的云原生微服务架构。本文将深入探讨腾讯云在微服务领域的最新进展，并通过一个实际案例展示如何在腾讯云平台上构建云原生应用。腾讯云微服务架构概览腾讯云微服务架构基于云原生理念，旨在帮助企业快速实现应用的容
Google earth studio 简介陟彼高冈yu 旅游
GoogleEarthStudio是一个基于Web的动画工具，专为创作使用GoogleEarth数据的动画和视频而设计。它利用了GoogleEarth强大的三维地图和卫星影像数据库，使用户能够轻松地创建逼真的地球动画、航拍视频和动态地图可视化。网址为https://www.google.com/earth/studio/。GoogleEarthStudio是一个基于Web的动画工具，专为创作使用G
PHP环境搭建详细教程好看资源平台前端 php
PHP是一个流行的服务器端脚本语言，广泛用于Web开发。为了使PHP能够在本地或服务器上运行，我们需要搭建一个合适的PHP环境。本教程将结合最新资料，介绍在不同操作系统上搭建PHP开发环境的多种方法，包括Windows、macOS和Linux系统的安装步骤，以及本地和Docker环境的配置。1.PHP环境搭建概述PHP环境的搭建主要分为以下几类：集成开发环境：例如XAMPP、WAMP、MAMP，这
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
【华为OD机试真题2023B卷 JAVA&JS】We Are A Team 若博豆 java 算法华为 javascript
华为OD2023（B卷）机试题库全覆盖，刷题指南点这里WeAreATeam时间限制：1秒|内存限制：32768K|语言限制：不限题目描述：总共有n个人在机房，每个人有一个标号（1<=标号<=n），他们分成了多个团队，需要你根据收到的m条消息判定指定的两个人是否在一个团队中，具体的：1、消息构成为：abc，整数a、b分别代
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
git - Webhook让部署自动化大猪大猪
我们现在有一个需求，将项目打包上传到gitlab或者github后，程序能自动部署，不用手动地去服务器中进行项目更新并运行，如何做到？这里我们可以使用gitlab与github的挂钩，挂钩的原理就是，每当我们有请求到gitlab与github服务器时，这时他俩会根据我们配置的挂钩地扯进行访问，webhook挂钩程序会一直监听着某个端口请求，一但收到他们发过来的请求，这时就知道用户有请求提交了，这时
webpack图片等资源的处理 dmengmeng
需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
node.js学习小猿L node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
SpringBlade dict-biz/list 接口 SQL 注入漏洞文章永久免费只为良心 oracle 数据库
SpringBladedict-biz/list接口SQL注入漏洞POC:构造请求包查看返回包你的网址/api/blade-system/dict-biz/list?updatexml(1,concat(0x7e,md5(1),0x7e),1)=1漏洞概述在SpringBlade框架中，如果dict-biz/list接口的后台处理逻辑没有正确地对用户输入进行过滤或参数化查询（PreparedSta
Java 重写(Override)与重载(Overload) 叨唧唧的
Java重写(Override)与重载(Overload)重写(Override)重写是子类对父类的允许访问的方法的实现过程进行重新编写,返回值和形参都不能改变。即外壳不变，核心重写！重写的好处在于子类可以根据需要，定义特定于自己的行为。也就是说子类能够根据需要实现父类的方法。重写方法不能抛出新的检查异常或者比被重写方法申明更加宽泛的异常。例如：父类的一个方法申明了一个检查异常IOExceptio
简单了解 JVM 记得开心一点啊 jvm
目录♫什么是JVM♫JVM的运行流程♫JVM运行时数据区♪虚拟机栈♪本地方法栈♪堆♪程序计数器♪方法区/元数据区♫类加载的过程♫双亲委派模型♫垃圾回收机制♫什么是JVMJVM是JavaVirtualMachine的简称，意为Java虚拟机。虚拟机是指通过软件模拟的具有完整硬件功能的、运行在一个完全隔离的环境中的完整计算机系统（如：JVM、VMwave、VirtualBox）。JVM和其他两个虚拟机
1分钟解决 -bash: mvn: command not found，在Centos 7中安装Maven Energet!c 开发语言
1分钟解决-bash:mvn:commandnotfound，在Centos7中安装Maven检查Java环境1下载Maven2解压Maven3配置环境变量4验证安装5常见问题与注意事项6总结检查Java环境Maven依赖Java环境，请确保系统已经安装了Java并配置了环境变量。可以通过以下命令检查：java-version如果未安装，请先安装Java。1下载Maven从官网下载：前往Apach
「豆包Marscode体验官」 | 云端 IDE 启动 & Rust 体验张风捷特烈 ide rust 开发语言后端
theme:cyanosis我正在参加「豆包MarsCode初体验」征文活动MarsCode可以看作一个运行在服务端的远程VSCode开发环境。对于我这种想要学习体验某些语言，但不想在电脑里装环境的人来说非常友好。本文就来介绍一下在MarsCode里，我的体验rust开发体验。一、MarsCode是什么它的本质是:提供代码助手和云端IDE服务的web网站，可通过下面的链接访问https://www
Java企业面试题3 马龙强_ java
1.break和continue的作用(智*图)break：用于完全退出一个循环（如for,while）或一个switch语句。当在循环体内遇到break语句时，程序会立即跳出当前循环体，继续执行循环之后的代码。continue：用于跳过当前循环体中剩余的部分，并开始下一次循环。如果是在for循环中使用continue，则会直接进行条件判断以决定是否执行下一轮循环。2.if分支语句和switch分
JVM、JRE和 JDK：理解Java开发的三大核心组件 Y雨何时停T Java java
Java是一门跨平台的编程语言，它的成功离不开背后强大的运行环境与开发工具的支持。在Java的生态中，JVM（Java虚拟机）、JRE（Java运行时环境）和JDK（Java开发工具包）是三个至关重要的核心组件。本文将探讨JVM、JDK和JRE的区别，帮助你更好地理解Java的运行机制。1.JVM：Java虚拟机（JavaVirtualMachine）什么是JVM？JVM，即Java虚拟机，是Ja
Java面试题精选：消息队列(二) 芒果不是芒 Java面试题精选 java kafka
一、Kafka的特性1.消息持久化：消息存储在磁盘，所以消息不会丢失2.高吞吐量：可以轻松实现单机百万级别的并发3.扩展性：扩展性强，还是动态扩展4.多客户端支持：支持多种语言（Java、C、C++、GO、）5.KafkaStreams（一个天生的流处理）:在双十一或者销售大屏就会用到这种流处理。使用KafkaStreams可以快速的把销售额统计出来6.安全机制：Kafka进行生产或者消费的时候会
白骑士的Java教学基础篇 2.5 控制流语句白骑士所长 Java 教学 java 开发语言
欢迎继续学习Java编程的基础篇！在前面的章节中，我们了解了Java的变量、数据类型和运算符。接下来，我们将探讨Java中的控制流语句。控制流语句用于控制程序的执行顺序，使我们能够根据特定条件执行不同的代码块，或重复执行某段代码。这是编写复杂程序的基础。通过学习这一节内容，你将掌握如何使用条件语句和循环语句来编写更加灵活和高效的代码。条件语句条件语句用于根据条件的真假来执行不同的代码块。if语句‘
python语法——三目运算符 HappyRocking python python 三目运算符
在java中，有三目运算符，如：intc=(a>b)?a:b表示c取两者中的较大值。但是在python，不能直接这样使用，估计是因为冒号在python有分行的关键作用。那么在python中，如何实现类似功能呢？可以使用ifelse语句，也是一行可以完成，格式为：aifbelsec表示如果b为True，则表达式等于a，否则等于c。如：c=(aif(a>b)elseb)同样是完成了取最大值的功能。
spring如何整合druid连接池？惜.己 spring spring junit 数据库 java idea 后端 xml
目录spring整合druid连接池1.新建maven项目2.新建mavenModule3.导入相关依赖4.配置log4j2.xml5.配置druid.xml1)xml中如何引入properties2)下面是配置文件6.准备jdbc.propertiesJDBC配置项解释7.配置druid8.测试spring整合druid连接池1.新建maven项目打开IDE（比如IntelliJIDEA,Ecl
ArrayList 源码解析程序猿进阶 Java基础 ArrayList List java 面试性能优化架构设计 idea
ArrayList是Java集合框架中的一个动态数组实现，提供了可变大小的数组功能。它继承自AbstractList并实现了List接口，是顺序容器，即元素存放的数据与放进去的顺序相同，允许放入null元素，底层通过数组实现。除该类未实现同步外，其余跟Vector大致相同。每个ArrayList都有一个容量capacity，表示底层数组的实际大小，容器内存储元素的个数不能多于当前容量。当向容器中添
Python神器！WEB自动化测试集成工具 DrissionPage 亚丁号 python 开发语言
一、前言用requests做数据采集面对要登录的网站时，要分析数据包、JS源码，构造复杂的请求，往往还要应付验证码、JS混淆、签名参数等反爬手段，门槛较高。若数据是由JS计算生成的，还须重现计算过程，体验不好，开发效率不高。使用浏览器，可以很大程度上绕过这些坑，但浏览器运行效率不高。因此，这个库设计初衷，是将它们合而为一，能够在不同须要时切换相应模式，并提供一种人性化的使用方法，提高开发和运行效率
Java爬虫框架（一）--架构设计狼图腾-狼之传说 java 框架 java 任务 html解析器存储电子商务
一、架构图那里搜网络爬虫框架主要针对电子商务网站进行数据爬取，分析，存储，索引。爬虫：爬虫负责爬取，解析，处理电子商务网站的网页的内容数据库：存储商品信息索引：商品的全文搜索索引Task队列：需要爬取的网页列表Visited表：已经爬取过的网页列表爬虫监控平台：web平台可以启动，停止爬虫，管理爬虫，task队列，visited表。二、爬虫1.流程1)Scheduler启动爬虫器，TaskMast
TOMCAT在POST方法提交参数丢失问题 357029540 java tomcat jsp
摘自http://my.oschina.net/luckyi/blog/213209 昨天在解决一个BUG时发现一个奇怪的问题，一个AJAX提交数据在之前都是木有问题的，突然提交出错影响其他处理流程。检查时发现页面处理数据较多，起初以为是提交顺序不正确修改后发现不是由此问题引起。于是删除掉一部分数据进行提交，较少数据能够提交成功。恢复较多数据后跟踪提交FORM DATA ，发现数
在MyEclipse中增加JSP模板删除-2008-08-18 ljy325 jsp xml MyEclipse
在D:\Program Files\MyEclipse 6.0\myeclipse\eclipse\plugins\com.genuitec.eclipse.wizards_6.0.1.zmyeclipse601200710\templates\jsp 目录下找到Jsp.vtl，复制一份，重命名为jsp2.vtl,然后把里面的内容修改为自己想要的格式，保存。然后在 D:\Progr
JavaScript常用验证脚本总结 eksliang JavaScript javaScript表单验证
转载请出自出处：http://eksliang.iteye.com/blog/2098985 下面这些验证脚本，是我在这几年开发中的总结，今天把他放出来，也算是一种分享吧，现在在我的项目中也在用！包括日期验证、比较，非空验证、身份证验证、数值验证、Email验证、电话验证等等...! &nb
微软BI（4） 18289753290 微软BI SSIS
1） Q:查看ssis里面某个控件输出的结果： A MessageBox.Show(Dts.Variables["v_lastTimestamp"].Value.ToString()); 这是我们在包里面定义的变量 2):在关联目的端表的时候如果是一对多的关系，一定要选择唯一的那个键作为关联字段。 3) Q：ssis里面如果将多个数据源的数据插入目的端一
定时对大数据量的表进行分表对数据备份酷的飞上天空大数据量
工作中遇到数据库中一个表的数据量比较大，属于日志表。正常情况下是不会有查询操作的，但如果不进行分表数据太多，执行一条简单sql语句要等好几分钟。。分表工具：linux的shell + mysql自身提供的管理命令原理：使用一个和原表数据结构一样的表，替换原表。 linux shell内容如下： =======================开始
本质的描述与因材施教永夜-极光感想随笔
不管碰到什么事,我都下意识的想去探索本质,找寻一个最形象的描述方式。我坚信,世界上对一件事物的描述和解释,肯定有一种最形象,最贴近本质,最容易让人理解 &
很迷茫。。。随便小屋随笔
小弟我今年研一，也是从事的咱们现在最流行的专业（计算机）。本科三流学校，为了能有个更好的跳板，进入了考研大军，非常有幸能进入研究生的行业（具体学校就不说了，怕把学校的名誉给损了）。先说一下自身的条件，本科专业软件工程。主要学习就是软件开发，几乎和计算机没有什么区别。因为学校本身三流，也就是让老师带着学生学点东西，然后让学生毕业就行了。对专业性的东西了解的非常浅。就那学的语言来说
23种设计模式的意图和适用范围 aijuans 设计模式
Factory Method 意图定义一个用于创建对象的接口，让子类决定实例化哪一个类。Factory Method 使一个类的实例化延迟到其子类。　　适用性当一个类不知道它所必须创建的对象的类的时候。　　当一个类希望由它的子类来指定它所创建的对象的时候。　　当类将创建对象的职责委托给多个帮助子类中的某一个，并且你希望将哪一个帮助子类是代理者这一信息局部化的时候。 Abstr
Java中的synchronized和volatile aoyouzi java volatile synchronized
说到Java的线程同步问题肯定要说到两个关键字synchronized和volatile。说到这两个关键字，又要说道JVM的内存模型。JVM里内存分为main memory和working memory。 Main memory是所有线程共享的，working memory则是线程的工作内存，它保存有部分main memory变量的拷贝，对这些变量的更新直接发生在working memo
js数组的操作和this关键字百合不是茶 js 数组操作 this关键字
js数组的操作; 一:数组的创建: 1、数组的创建 var array = new Array();　//创建一个数组 var array = new Array([size]);　//创建一个数组并指定长度，注意不是上限，是长度 var arrayObj = new Array([element0[, element1[, ...[, elementN]]]
别人的阿里面试感悟 bijian1013 面试分享工作感悟阿里面试
原文如下：http://greemranqq.iteye.com/blog/2007170 一直做企业系统，虽然也自己一直学习技术，但是感觉还是有所欠缺，准备花几个月的时间，把互联网的东西，以及一些基础更加的深入透析，结果这次比较意外，有点突然，下面分享一下感受吧！ &nb
淘宝的测试框架Itest Bill_chen spring maven 框架单元测试 JUnit
Itest测试框架是TaoBao测试部门开发的一套单元测试框架，以Junit4为核心，集合DbUnit、Unitils等主流测试框架，应该算是比较好用的了。近期项目中用了下，有关itest的具体使用如下： 1.在Maven中引入itest框架： <dependency> <groupId>com.taobao.test</groupId&g
【Java多线程二】多路条件解决生产者消费者问题 bit1129 java多线程
package com.tom; import java.util.LinkedList; import java.util.Queue; import java.util.concurrent.ThreadLocalRandom; import java.util.concurrent.locks.Condition; import java.util.concurrent.loc
汉字转拼音pinyin4j 白糖_ pinyin4j
以前在项目中遇到汉字转拼音的情况，于是在网上找到了pinyin4j这个工具包，非常有用，别的不说了，直接下代码： import java.util.HashSet; import java.util.Set; import net.sourceforge.pinyin4j.PinyinHelper; import net.sourceforge.pinyin
org.hibernate.TransactionException: JDBC begin failed解决方案 bozch ssh 数据库异常 DBCP
org.hibernate.TransactionException: JDBC begin failed: at org.hibernate.transaction.JDBCTransaction.begin(JDBCTransaction.java:68) at org.hibernate.impl.SessionImp
java-并查集（Disjoint-set）-将多个集合合并成没有交集的集合 bylijinnan java
import java.util.ArrayList; import java.util.Arrays; import java.util.HashMap; import java.util.HashSet; import java.util.Iterator; import java.util.List; import java.util.Map; import java.ut
Java PrintWriter打印乱码 chenbowen00 java
一个小程序读写文件，发现PrintWriter输出后文件存在乱码，解决办法主要统一输入输出流编码格式。读文件： BufferedReader 从字符输入流中读取文本，缓冲各个字符，从而提供字符、数组和行的高效读取。可以指定缓冲区的大小，或者可使用默认的大小。大多数情况下，默认值就足够大了。通常，Reader 所作的每个读取请求都会导致对基础字符或字节流进行相应的读取请求。因
[天气与气候]极端气候环境 comsci 环境
如果空间环境出现异变...外星文明并未出现,而只是用某种气象武器对地球的气候系统进行攻击,并挑唆地球国家间的战争,经过一段时间的准备...最大限度的削弱地球文明的整体力量,然后再进行入侵...... 那么地球上的国家应该做什么样的防备工作呢? &n
oracle order by与union一起使用的用法 daizj UNION oracle order by
当使用union操作时，排序语句必须放在最后面才正确，如下：只能在union的最后一个子查询中使用order by，而这个order by是针对整个unioning后的结果集的。So：如果unoin的几个子查询列名不同，如 Sql代码 select supplier_id, supplier_name from suppliers UNI
zeus持久层读写分离单元测试 deng520159 单元测试
本文是zeus读写分离单元测试,距离分库分表,只有一步了.上代码: 1.ZeusMasterSlaveTest.java package com.dengliang.zeus.webdemo.test; import java.util.ArrayList; import java.util.List; import org.junit.Assert; import org.j
Yii 截取字符串(UTF-8) 使用组件 dcj3sjt126com yii
1.将Helper.php放进protected\components文件夹下。 2.调用方法： Helper::truncate_utf8_string($content,20,false); //不显示省略号 Helper::truncate_utf8_string($content,20); //显示省略号 &n
安装memcache及php扩展 dcj3sjt126com PHP
安装memcache tar zxvf memcache-2.2.5.tgz cd memcache-2.2.5/ /usr/local/php/bin/phpize (?) ./configure --with-php-confi
JsonObject 处理日期 feifeilinlin521 java json JsonOjbect JsonArray JSONException
写这边文章的初衷就是遇到了json在转换日期格式出现了异常 net.sf.json.JSONException: java.lang.reflect.InvocationTargetException 原因是当你用Map接收数据库返回了java.sql.Date 日期的数据进行json转换出的问题话不多说直接上代码 &n
Ehcache（06）——监听器 234390216 监听器 listener ehcache
监听器 Ehcache中监听器有两种，监听CacheManager的CacheManagerEventListener和监听Cache的CacheEventListener。在Ehcache中，Listener是通过对应的监听器工厂来生产和发生作用的。下面我们将来介绍一下这两种类型的监听器。
activiti 自带设计器中chrome 34版本不能打开bug的解决 jackyrong Activiti
在acitivti modeler中，如果是chrome 34，则不能打开该设计器，其他浏览器可以，经证实为bug，参考 http://forums.activiti.org/content/activiti-modeler-doesnt-work-chrome-v34 修改为，找到 oryx.debug.js 在最头部增加 if (!Document.
微信收货地址共享接口-终极解决 laotu5i0 微信开发
最近要接入微信的收货地址共享接口，总是不成功，折腾了好几天，实在没办法网上搜到的帖子也是骂声一片。我把我碰到并解决问题的过程分享出来，希望能给微信的接口文档起到一个辅助作用，让后面进来的开发者能快速的接入，而不需要像我们一样苦逼的浪费好几天，甚至一周的青春。各种羞辱、谩骂的话就不说了，本人还算文明。如果你能搜到本贴，说明你已经碰到了各种 ed
关于人才 netkiller.github.com 工作面试招聘 netkiller 人才
关于人才每个月我都会接到许多猎头的电话，有些猎头比较专业，但绝大多数在我看来与猎头二字还是有很大差距的。与猎头接触多了，自然也了解了他们的工作，包括操作手法，总体上国内的猎头行业还处在初级阶段。总结就是“盲目推荐，以量取胜”。目前现状许多从事人力资源工作的人，根本不懂得怎么找人才。处在人才找不到企业，企业找不到人才的尴尬处境。企业招聘，通常是需要用人的部门提出招聘条件，由人
搭建 CentOS 6 服务器 - 目录 rensanning centos
(1) 安装CentOS ISO（desktop/minimal）、Cloud（AWS/阿里云）、Virtualization（VMWare、VirtualBox）详细内容 (2) Linux常用命令 cd、ls、rm、chmod...... 详细内容 (3) 初始环境设置用户管理、网络设置、安全设置...... 详细内容 (4) 常驻服务Daemon
【求助】mongoDB无法更新主键 toknowme mongodb
Query query = new Query(); query.addCriteria(new Criteria("_id").is(o.getId())); &n
jquery 页面滚动到底部自动加载插件集合 xp9802 jquery
很多社交网站都使用无限滚动的翻页技术来提高用户体验，当你页面滑到列表底部时候无需点击就自动加载更多的内容。下面为你推荐 10 个 jQuery 的无限滚动的插件： 1. jQuery ScrollPagination jQuery ScrollPagination plugin 是一个 jQuery 实现的支持无限滚动加载数据的插件。 2. jQuery Screw S