二.2vueadmin-template反向代理/路由配置,idc增查删
一.反向代理:
(1)F:\devops\data\web\vueAdmin-template\config\index.js ---让别人也能访问我的vue前端
host: '0.0.0.0',
(2)F:\devops\data\web\vueAdmin-template\config\index.js ---前端配置跨域(上述的跨域是后端配置的)--反向代理配置proxyTable
那dev.env.js文件中的BASE_API: '"...."',默认可不用更改
proxyTable: {
'/api': { //api是我自定的接口
target: 'http://127.0.0.1:8000',
pathRewrite: {
'^/api': ''
}
}
},
二.自定添加idc模块
写一个模块需要做:写api配置和后端连接,还要写路由,写组件...
1.写路由src/router/index.js
{
path: '/idcs', url路径
component: Layout, 模版组件
children: [
{
path: '', 为空是只要能匹配上url路径就能找到下面component中定义的组件
name: 'Idcs',
component: () => import('@/views/idcs/index'), 定义idcs组件
meta: { title: 'Idcs', icon: 'tree' }
}
]
},
2.展示组件:新建views/idcs/index.vue
<template>
<div class="idcs">
IDCS
</div> </template> <script>
export default {
name: 'idcs',
data() {
return {}
},
methods: {
}
}
</script> <style lang='scss' scoped>
.idcs{
position: relative;
display: block;
}
</style>
重启后如下效果有了:
三.向后端请求数据并展示---idc增查删
1.获取后端数据:
(1)新建api/idcs.js --定义接口
import axios from 'axios' export function getIdcsList() {
return axios.get('/api/idcs/')
} export function createIdc(value) {
return axios.post('/api/idcs/', value)
} export function updateIdc(value) {
return axios.put(`/api/idcs/${value.id}/`, value.params)
} export function deleteIdc(id) {
return axios.delete(`/api/idcs/${id}/`)
}
(2)views/idcs/index.vue --使用接口
.类名,样式名,name,它们的名字建议保持一致.
<template>
<div class="idc">
{{ idcs }}
</div>
</template> <script>
import { getIdcsList } from '@/api/idcs' export default {
name: 'idc',
data() {
return {
idcs: []
}
},
methods: {
fetchData() {
getIdcsList().then(
res => {
this.idcs = res.data.results
}
)
}
},
created() {
this.fetchData()
}
}
</script> <style lang='scss' scoped>
.idc {
padding: 10px;
}
</style>
报错如下:
createError.js:16 Uncaught (in promise) Error: Request failed with status code 404
at createError (createError.js:16)
at settle (settle.js:18)
at XMLHttpRequest.handleLoad (xhr.js:77)
经排查,发现原因是我的接口url写错了:src/api/idcs.js文件中:
import axios from 'axios' export function getIdcsList() {
return axios.get('/api/idcs') --->应该改为return axios.get('/api/idcs/')即末尾没加反斜杠
}
最后效果如下:已获取到数据
2.展示数据--idc查询
(1)写展示组件views/idc/list.vue:
通过https://element.eleme.cn/#/zh-CN/component/installation--找自定义表格代码模版:
<template>
<div class="idc-list">
<el-table
:data="value"
style="width: 100%">
<el-table-column
label="ID"
width="">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.id }}</span>
</template>
</el-table-column>
<el-table-column
label="名称"
width="">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column
label="电话"
width="">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.phone }}</span>
</template>
</el-table-column>
<el-table-column
label="邮箱"
width="">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.email }}</span>
</template>
</el-table-column>
<el-table-column
label="地址"
width="">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.address }}</span>
</template>
</el-table-column>
<el-table-column
label="简称"
width="">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.letter }}</span>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.row)">编辑</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template> <script>
export default {
name: 'idc-list',
props: ['value'],
methods: {
handleEdit() {},
handleDelete() {}
}
}
</script> <style lang='scss'>
.idc-list {}
</style>
(2)接口中引入展示组件,views/idcs/index.vue:
<template>
<div class="idc">
<idc-list :value="idcs"></idc-list> <<<<<<引入
</div>
</template> <script>
import { getIdcsList } from '@/api/idcs'
import IdcList from './list' <<<<<<<<引入 export default {
name: 'idc',
components: { <<<<<<引入组件
IdcList
},
data() {
return {
idcs: []
}
},
methods: {
fetchData() {
getIdcsList().then(
res => {
this.idcs = res.data.results
}
)
}
},
created() {
this.fetchData()
}
}
</script> <style lang='scss' scoped>
.idc {
padding: 10px;
}
</style>
最终效果如下图:
3.添加新增接口
点新增按钮时弹出窗口,这个弹窗需要一个状态来控制它展示和消失,
参考https://element.eleme.cn/#/zh-CN/component/dialog中对话框模版,此弹窗中我还要有内容,这个内容就是我要填写的一些表单。
1.1views/idcs/index.vue:
<template>
<div class="idc">
<el-button type="primary" @click="add" size="small">新增IDC</el-button>
<idc-list :value="idcs"></idc-list>
<el-dialog <<<<<1.引入对话框模版
title="提示"
:visible.sync="dialogVisible"
width="50%">
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</template> <script>
import { getIdcsList } from '@/api/idcs'
import IdcList from './list' export default {
name: 'idc',
components: {
IdcList
},
data() {
return {
dialogVisible: false, <<<<<2.默认
idcs: []
}
},
methods: {
fetchData() {
getIdcsList().then(
res => {
this.idcs = res.data.results
}
)
},
add() {
this.dialogVisible = true <<<3.新增时生效
}
},
created() {
this.fetchData()
}
}
</script> <style lang='scss' scoped>
.idc {
padding: 10px;
}
</style>
效果如下:
那现在就需要对此弹窗进行填充我的from表单---建议单独写一form表单组件
2.1views/idcs/form.vue,这个表单它的定位就是我每次用它时,我给它一初始化数据,它有input输入框,我去填完提交,我关闭时它把数据清空恢复。所以它需要一初始化数据的对象,用来做它的初始化数据。
参考https://element.eleme.cn/#/zh-CN/component/form自定义规则模版
<template>
<div class="idc-form">
<el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-form">
<el-form-item label="名称" prop="name">
<el-input v-model="form.name" placeholder="请输入名称"></el-input>
</el-form-item>
<el-form-item label="电话" prop="phone">
<el-input v-model="form.phone" placeholder="请输入电话"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
</el-form-item>
<el-form-item label="地址" prop="address">
<el-input v-model="form.address" placeholder="请输入地址"></el-input>
</el-form-item>
<el-form-item label="简称" prop="letter">
<el-input v-model="form.letter" placeholder="请输入简称"></el-input>
</el-form-item>
<el-form-item>
<div class="btn-wrapper">
<el-button size="small" @click="cancel">取消</el-button>
<el-button size="small" type="primary" @click="submitForm" :loading="isLoading">保存</el-button>
</div>
</el-form-item>
</el-form>
</div>
</template> <script>
const initizeForm = { <<<<<<2.放它的初始化数据
name: '',
phone: '',
email: '',
address: '',
letter: ''
} export default {
name: 'idc-form',
data() {
return {
form: { ...initizeForm } <<<<<1.初始化数据的对象,并引入上述的初始化数据
}
},
methods: {
submitForm() {},
resetForm() {}
}
}
</script> <style lang='scss' scoped>
.idc-form {
position: relative;
display: block;
.btn-wrapper{
text-align: right;
}
}
</style>
2.2index.vue中引入form
效果如下图:
3.1form中要定义rules属性,否则无法创建,要把字段的prop传给它才能校验此字段。并且你输完数据后点保存前还要获取它校验的结果(是否符合)form.vue:
<template>
<div class="idc-form">
<el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-form">
<el-form-item label="名称" prop="name">
<el-input v-model="form.name" placeholder="请输入名称"></el-input>
</el-form-item>
<el-form-item label="电话" prop="phone">
<el-input v-model="form.phone" placeholder="请输入电话"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
</el-form-item>
<el-form-item label="地址" prop="address">
<el-input v-model="form.address" placeholder="请输入地址"></el-input>
</el-form-item>
<el-form-item label="简称" prop="letter">
<el-input v-model="form.letter" placeholder="请输入简称"></el-input>
</el-form-item>
<el-form-item>
<div class="btn-wrapper">
<el-button size="small" @click="cancel">取消</el-button>
<el-button size="small" type="primary" @click="submitForm" :loading="isLoading">保存</el-button>
</div>
</el-form-item>
</el-form>
</div>
</template> <script>
const initizeForm = {
name: '',
phone: '',
email: '',
address: '',
letter: ''
} export default {
name: 'idc-form',
props: ['isLoading'],
data() {
return {
form: { ...initizeForm },
rules: {
name: [
[
{ required: true, message: '请输入名称', trigger: 'blur' }
]
],
phone: [
[
{ required: true, message: '请输入电话', trigger: 'blur' }
]
],
email: [
[
{ required: true, message: '请输入邮箱', trigger: 'blur' }
]
],
address: [
[
{ required: true, message: '请输入地址', trigger: 'blur' }
]
],
letter: [
[
{ required: true, message: '请输入简称', trigger: 'blur' }
]
] }
}
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (!valid) {
return
}
this.$emit('submit', this.form)
})
},
cancel() {
this.$emit('cancel')
}
}
}
</script> <style lang='scss' scoped>
.idc-form {
position: relative;
display: block;
.btn-wrapper{
text-align: right;
}
}
</style>
3.2index.vue引入form
<template>
<div class="idc">
<el-button type="primary" @click="add" size="small">新增IDC</el-button>
<idc-list :value="idcs"></idc-list>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="50%">
<idc-form
ref="idcForm"
:is-loading="isLoadingCreateIdc"
@submit="handleSubmit"
@cancel="handleCancel">
</idc-form>
</el-dialog>
</div>
</template> <script>
import { getIdcsList, createIdc } from '@/api/idcs'
import IdcList from './list'
import IdcForm from './form' export default {
name: 'idc',
components: {
IdcList,
IdcForm
},
data() {
return {
dialogVisible: false,
idcs: [],
isLoadingCreateIdc: false
}
},
methods: {
fetchData() {
getIdcsList().then(
res => {
this.idcs = res.data.results
}
)
},
add() {
this.dialogVisible = true
},
handleSubmit(value) {
this.isLoadingCreateIdc = true
createIdc(value).then(
() => {
this.fetchData()
this.handleCancel()
this.isLoadingCreateIdc = false
},
() => { this.isLoadingCreateIdc = false }
)
},
handleCancel() {
this.dialogVisible = false
this.$refs.idcForm.$refs.form.resetFields()
}
},
created() {
this.fetchData()
}
}
</script> <style lang='scss' scoped>
.idc {
padding: 10px;
}
</style>
效果如下图点击保存提交数据后:页面会多出此条记录了
4.添加idc删除i接口
参考https://element.eleme.cn/#/zh-CN/component/message-box代码模版并给加加一弹窗组件,为的是让用户确认是否删除。
(1)list.vue
<template>
<div class="idc-list">
<el-table
:data="value"
style="width: 100%">
<el-table-column
label="ID"
width="">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.id }}</span>
</template>
</el-table-column>
<el-table-column
label="名称"
width="">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column
label="电话"
width="">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.phone }}</span>
</template>
</el-table-column>
<el-table-column
label="邮箱"
width="">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.email }}</span>
</template>
</el-table-column>
<el-table-column
label="地址"
width="">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.address }}</span>
</template>
</el-table-column>
<el-table-column
label="简称"
width="">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.letter }}</span>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.row)">编辑</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template> <script>
export default {
name: 'idc-list',
props: ['value'],
methods: {
handleEdit() {
},
handleDelete(idc) {
const id = idc.id
const name = idc.name
this.$confirm(`此操作将永久删除该条IDC:${name} 是否继续?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$emit('delete', id)
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
}
}
}
</script> <style lang='scss'>
.idc-list {}
</style>
(2)form.vue:
<template>
<div class="idc-form">
<el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-form">
<el-form-item label="名称" prop="name">
<el-input v-model="form.name" placeholder="请输入名称"></el-input>
</el-form-item>
<el-form-item label="电话" prop="phone">
<el-input v-model="form.phone" placeholder="请输入电话"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
</el-form-item>
<el-form-item label="地址" prop="address">
<el-input v-model="form.address" placeholder="请输入地址"></el-input>
</el-form-item>
<el-form-item label="简称" prop="letter">
<el-input v-model="form.letter" placeholder="请输入简称"></el-input>
</el-form-item>
<el-form-item>
<div class="btn-wrapper">
<el-button size="small" @click="cancel">取消</el-button>
<el-button size="small" type="primary" @click="submitForm" :loading="isLoading">保存</el-button>
</div>
</el-form-item>
</el-form>
</div>
</template> <script>
const initizeForm = {
name: '',
phone: '',
email: '',
address: '',
letter: ''
} export default {
name: 'idc-form',
props: ['isLoading'],
data() {
return {
form: { ...initizeForm },
rules: {
name: [
[
{ required: true, message: '请输入名称', trigger: 'blur' }
]
],
phone: [
[
{ required: true, message: '请输入电话', trigger: 'blur' }
]
],
email: [
[
{ required: true, message: '请输入邮箱', trigger: 'blur' }
]
],
address: [
[
{ required: true, message: '请输入地址', trigger: 'blur' }
]
],
letter: [
[
{ required: true, message: '请输入简称', trigger: 'blur' }
]
] }
}
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (!valid) {
return
}
this.$emit('submit', this.form)
})
},
cancel() {
this.$emit('cancel')
}
}
}
</script> <style lang='scss' scoped>
.idc-form {
position: relative;
display: block;
.btn-wrapper{
text-align: right;
}
}
</style>
这样点击删除就实现删除idc某条记录的效果了。
5.添加idc编辑接口--新增和编辑组件合并
编辑和新增操作很像,区别就是title提示不一样而已,只是说编辑要给这弹窗中的几个框一个初始值(每一行的值),所以这里我可以把新增和编辑组件合并。
首先它需要一个title告诉我 弹窗展示的是新增还是编辑
(1)index.vue:
<template>
<div class="idc">
<el-button type="primary" @click="add" size="small">新增IDC</el-button>
<idc-list :value="idcs" @edit="handleEdit" @delete="handleDelete"></idc-list>
<el-dialog
title="新增"
:visible.sync="dialogVisibleForAdd"
width="50%">
<idc-form
ref="idcForm"
:is-loading="isLoadingCreateIdc"
@submit="handleSubmitAdd"
@cancel="handleCancelAdd">
</idc-form>
</el-dialog>
<el-dialog
title="编辑"
:visible.sync="dialogVisibleForEdit"
width="50%">
<idc-form
ref="idcForm"
:is-loading="isLoadingEditIdc"
:form="currentValue"
@submit="handleSubmitEdit"
@cancel="handleCancelEdit">
</idc-form>
</el-dialog>
</div>
</template> <script>
import { getIdcsList, createIdc, deleteIdc, updateIdc } from '@/api/idcs'
import IdcList from './list'
import IdcForm from './form' export default {
name: 'idc',
components: {
IdcList,
IdcForm
},
data() {
return {
dialogVisibleForAdd: false,
dialogVisibleForEdit: false,
idcs: [],
isLoadingCreateIdc: false,
isLoadingEditIdc: false,
currentValue: {}
}
},
methods: {
fetchData() {
getIdcsList().then(
res => {
this.idcs = res.data.results
}
)
},
add() {
this.dialogVisibleForAdd = true
},
handleSubmitAdd(value) {
this.isLoadingCreateIdc = true
createIdc(value).then(
() => {
this.fetchData()
this.handleCancelAdd()
this.isLoadingCreateIdc = false
},
() => { this.isLoadingCreateIdc = false }
)
},
handleSubmitEdit(value) {
this.isLoadingEditIdc = true
const { id, ...params } = value
updateIdc({ id, params }).then(
() => {
this.fetchData()
this.handleCancelEdit()
this.isLoadingEditIdc = false
},
() => { this.isLoadingEditIdc = false }
)
},
handleCancelAdd() {
this.dialogVisibleForAdd = false
this.$refs.idcForm.$refs.form.resetFields()
},
handleCancelEdit() {
this.dialogVisibleForEdit = false
this.$refs.idcForm.$refs.form.resetFields()
},
handleDelete(id) {
deleteIdc(id).then(
() => {
this.fetchData()
},
err => {
console.log(err.message)
}
)
},
handleEdit(value) {
this.currentValue = { ...value }
this.dialogVisibleForEdit = true
}
},
created() {
this.fetchData()
}
}
</script> <style lang='scss' scoped>
.idc {
padding: 10px;
}
</style>
(2)from.vue:
<template>
<div class="idc-form">
<el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-form">
<el-form-item label="名称" prop="name">
<el-input v-model="form.name" placeholder="请输入名称"></el-input>
</el-form-item>
<el-form-item label="电话" prop="phone">
<el-input v-model="form.phone" placeholder="请输入电话"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
</el-form-item>
<el-form-item label="地址" prop="address">
<el-input v-model="form.address" placeholder="请输入地址"></el-input>
</el-form-item>
<el-form-item label="简称" prop="letter">
<el-input v-model="form.letter" placeholder="请输入简称"></el-input>
</el-form-item>
<el-form-item>
<div class="btn-wrapper">
<el-button size="small" @click="cancel">取消</el-button>
<el-button size="small" type="primary" @click="submitForm" :loading="isLoading">保存</el-button>
</div>
</el-form-item>
</el-form>
</div>
</template> <script>
export default {
name: 'idc-form',
props: {
isLoading: {
required: true,
type: Boolean
},
form: {
type: Object,
default() {
return {
name: '',
phone: '',
email: '',
address: '',
letter: ''
}
}
}
},
data() {
return {
rules: {
name: [
[
{ required: true, message: '请输入名称', trigger: 'blur' }
]
],
phone: [
[
{ required: true, message: '请输入电话', trigger: 'blur' }
]
],
email: [
[
{ required: true, message: '请输入邮箱', trigger: 'blur' }
]
],
address: [
[
{ required: true, message: '请输入地址', trigger: 'blur' }
]
],
letter: [
[
{ required: true, message: '请输入简称', trigger: 'blur' }
]
] }
}
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (!valid) {
return
}
this.$emit('submit', this.form)
})
},
cancel() {
this.$emit('cancel')
}
}
}
</script> <style lang='scss' scoped>
.idc-form {
position: relative;
display: block;
.btn-wrapper{
text-align: right;
}
}
</style>
这样就实现idc的增删改查了!
二.2vueadmin-template反向代理/路由配置,idc增查删的更多相关文章
- Nginx(http协议代理 搭建虚拟主机 服务的反向代理 在反向代理中配置集群的负载均衡)
Nginx 简介 Nginx (engine x) 是一个高性能的 HTTP 和反向代理服务.Nginx 是由伊戈尔·赛索耶夫为俄罗斯访问量第二的 Rambler.ru 站点(俄文:Рамблер)开 ...
- nginx的反向代理和配置
最近有打算研读nginx源代码,看到网上介绍nginx可以作为一个反向代理服务器完成负载均衡.所以搜罗了一些关于反向代理服务器的内容,整理综合. 一 概述 反向代理(Reverse Proxy)方式 ...
- Apache反向代理的配置
Apache反向代理的配置 一: Mac系统自带apache服务器 1. 查看apache版本命令如下: sudo apachectl -v 2. 启动apache sudo apachect ...
- Nginx专题(1):Nginx之反向代理及配置
摘要:本文从Nginx的概念出发,分别从反向代理的概念.优势.配置代码3个方面介绍了Nginx的特性之一反向代理. 文章来源:宜信技术学院 & 宜信支付结算团队技术分享第一期-宜信支付结算八方 ...
- Centos7 nginx 反向代理的配置
一.正向代理与反向代理 1.正向代理 正向代理往VPN理解 正向代理,也就是传说中的代理,他的工作原理就像一个跳板(VPN),简单的说: 我是一个用户,我访问不了某网站,但是我能访问一个代理服务器,这 ...
- nginx反向代理缓存配置
关于nginx的反向代理缓存配置,用的最多的就是CDN公司,目前CDN公司用纯nginx做缓存的已经很少了,基本都用tnginx(阿里的).openresty:但是这两款软件都是基于nignx开发的, ...
- Nginx反向代理的配置
Chapter: Nginx基本操作释疑 1. Nginx的端口修改问题 2. Nginx 301重定向的配置 3. Windows下配置Nginx使之支持PHP 4. Linux下配置Nginx使之 ...
- 【转】Nginx服务器的反向代理proxy_pass配置方法讲解
[转]Nginx服务器的反向代理proxy_pass配置方法讲解 转自:http://www.jb51.net/article/78746.htm 就普通的反向代理来讲Nginx的配置还是比较简单的, ...
- nginx反向代理的配置优化
作者:守住每一天 blog:liuyu.blog.51cto.combbs:bbs.linuxtone.orgmsn:liuyubj520#hotmail.comemail:liuyu105#gmai ...
随机推荐
- Java实现 LeetCode 587 安装栅栏(图算法转换成数学问题)
587. 安装栅栏 在一个二维的花园中,有一些用 (x, y) 坐标表示的树.由于安装费用十分昂贵,你的任务是先用最短的绳子围起所有的树.只有当所有的树都被绳子包围时,花园才能围好栅栏.你需要找到正好 ...
- Java实现 LeetCode 530 二叉搜索树的最小绝对差(遍历树)
530. 二叉搜索树的最小绝对差 给你一棵所有节点为非负值的二叉搜索树,请你计算树中任意两节点的差的绝对值的最小值. 示例: 输入: 1 \ 3 / 2 输出: 1 解释: 最小绝对差为 1,其中 2 ...
- Java实现 蓝桥杯VIP 算法训练 统计单词个数
题目描述 给出一个长度不超过200的由小写英文字母组 成的字母串(约定;该字串以每行20个字母的方式输入,且保证每行一定为20个).要求将此字母串分成k份 (1< k< =40),且每份中 ...
- Java实现 LeetCode 75 颜色分类
75. 颜色分类 给定一个包含红色.白色和蓝色,一共 n 个元素的数组,原地对它们进行排序,使得相同颜色的元素相邻,并按照红色.白色.蓝色顺序排列. 此题中,我们使用整数 0. 1 和 2 分别表示红 ...
- Java实现 LeetCode 58 最后一个单词的长度
58. 最后一个单词的长度 给定一个仅包含大小写字母和空格 ' ' 的字符串 s,返回其最后一个单词的长度. 如果字符串从左向右滚动显示,那么最后一个单词就是最后出现的单词. 如果不存在最后一个单词, ...
- 第六届蓝桥杯JavaC组省赛真题
解题代码部分来自网友,如果有不对的地方,欢迎各位大佬评论 题目1.隔行变色 隔行变色 Excel表的格子很多,为了避免把某行的数据和相邻行混淆,可以采用隔行变色的样式. 小明设计的样式为:第1行蓝色, ...
- java实现第六届蓝桥杯三羊献瑞
三羊献瑞 题目描述 观察下面的加法算式: 祥 瑞 生 辉 三 羊 献 瑞 三 羊 生 瑞 气 (如果有对齐问题,可以参看[图1.jpg]) 其中,相同的汉字代表相同的数字,不同的汉字代表不同的数字. ...
- Python 图像处理 OpenCV (7):图像平滑(滤波)处理
前文传送门: 「Python 图像处理 OpenCV (1):入门」 「Python 图像处理 OpenCV (2):像素处理与 Numpy 操作以及 Matplotlib 显示图像」 「Python ...
- 【Spring注解驱动开发】自定义TypeFilter指定@ComponentScan注解的过滤规则
写在前面 Spring的强大之处不仅仅是提供了IOC容器,能够通过过滤规则指定排除和只包含哪些组件,它还能够通过自定义TypeFilter来指定过滤规则.如果Spring内置的过滤规则不能够满足我们的 ...
- 如何设置body内容不能复制?
通过在body标签上设置相关的属性: <body oncontextmenu="return false" ondragstart="return false&qu ...