【Vue路由系统详述】
"一切分离都是为了更好的结合，本文详细介绍了前后端架构分离之后，前端如何实现路由的控制，即Vue路由系统——VueRouter.
VueRouter下载地址(默认最新版本)：https://unpkg.com/vue-router@3.0.1/dist/vue-router.js
@
VueRouter实现原理：
根据锚点值的改变，修改组件内容.
我们先来看看不使用VueRouter，自己实现路由的控制，如下代码：
<body>
<div id="app"></div>
<script>
let oDiv = document.getElementById('app');
window.onhashchange = function () {
// vue-router的实现原理是根据锚值的改变来对页面进行切换
switch (location.hash) {
case '#/login':
oDiv.innerHTML=`<h1>我是登陆页面</h1>`;
break;
case '#/register':
oDiv.innerHTML = `<h1>我是注册页面</h1>`;
break;
// 输入其他路径将显示为首页
default:
oDiv.innerHTML = `<h1>我是首页</h1>`;
break;
}
};
console.log(location.hash);
</script>
</body>
测试效果如下图：
可以看到，通过改变锚点值，页面跳转到我们需要的内容.
再来看看VueRouter实现路由的控制：
<body>
<div id="app"></div>
<script>
// 第一步：在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Login = {
template: `
<div>
<h1>我是登陆页面</h1>
</div>
`,
};
let Register = {
template: `
<div>
<h1>我是注册页面</h1>
</div>
`,
};
let App = {
// 第四部：监听a标签的锚点值的改变
// 下面的router-link会渲染成a标签，to为标签的href属性，to后面是router中定义的路径
// 下面的router-view是页面内容的渲染出口
template: `
<div>
<router-link to="/">首页</router-link>
<router-link to="/login">登陆</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
`,
};
// 第二步：实例化一个router对象(本质上是将路径和页面绑定了对应关系)
let router = new VueRouter({
routes: [
// 注意：routes，不是routers
{
path: '/',
component: Home,
},
{
path: '/login',
component: Login,
},
{
path: '/register',
component: Register,
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 第三步：在根实例中注册router对象
router: router,
components: {
App,
},
});
</script>
</body>
测试效果如下图：
路由命名
方式一：
通过在vue-router对象中增加name属性来指定路由名称.
调用方式：v-bind:to={ name: "路由名称" }
<body>
<div id="app"></div>
<script>
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Login = {
template: `
<div>
<h1>我是登陆页面</h1>
</div>
`,
};
let Register = {
template: `
<div>
<h1>我是注册页面</h1>
</div>
`,
};
let App = {
// 下面的router-link会渲染成a标签，to为a标签的href属性，to后面的name指定的是路由别名
// 下面的router-view是页面内容的渲染出口
// 通过v-bind绑定定义的路由名称, v-bind:to="{ ... }", 可简写为:to="{ ... }"
template: `
<div>
<router-link v-bind:to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'login' }">登陆</router-link>
<router-link :to="{ name: 'register' }">注册</router-link>
<router-view></router-view>
</div>
`,
};
// 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
// 注意：routes, 不是routers
routes: [
{
// 路由命名
name: 'home',
path: '/',
component: Home,
},
{
name: 'login',
path: '/login',
component: Login,
},
{
name: 'register',
path: '/register',
component: Register,
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在根实例中注册router对象
router: router,
components: {
App,
},
});
</script>
</body>
方式二：
<body>
<div id="app"></div>
<script>
Vue.use(VueRouter);
let App = {
template: `
<div>
<router-link to="/">首页</router-link>
<router-view name="header"></router-view>
<router-view name="footer"></router-view>
</div>
`,
};
let router = new VueRouter({
routes: [
{
path: '/',
components: {
header: {
template: `
<div>头部</div>
`,
},
footer: {
template: `
<div>底部</div>
`,
},
},
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
router: router,
components: {
App,
},
});
</script>
</body>
路由参数
<body>
<div id="app"></div>
<script>
/*
在真实的场景中，有以下两种路径形式：
1. xx.html/users/1
2. xx.html/users?userId=1
*/
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是主页面</h1>
</div>
`,
};
let userParams = {
template: `
<div>
<h1>我是用户1的信息</h1>
</div>
`,
};
let userQuery = {
template: `
<div>
<h1>我是用户2的信息</h1>
</div>
`,
};
let App = {
// 下面的router-link会渲染成a标签，to为a标签的href属性，to后面的name指定的是路由别名
// 下面的router-view是页面内容的渲染出口
// 通过v-bind绑定路由名称, v-bind:to="{ ... }", 可简写为:to="{ ... }"
// 下面的params与query参数分别对应上面所说的两种路径形式
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'userParams', params: {userId: 1 } }">登陆</router-link>
<router-link :to="{ name: 'userQuery', query: { userId: 2 } }">注册</router-link>
<router-view></router-view>
</div>
`,
};
// 创建一个vue-router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
// 1. xx.html/users/1
name: 'userParams',
path: '/users/:userId',
component: userParams,
},
{
// 2. xx.html/users?userId=1
name: 'userQuery',
path: '/users',
component: userQuery,
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在跟实例中注册router对象
router: router,
components: {
App,
},
});
</script>
</body>
测试效果如下图：
路由参数的实现原理
<body>
<div id="app"></div>
<script>
/*
在真实的场景中，有以下两种路径形式：
1. xx.html/user/1
2. xx.html/user/?userId=1
*/
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是主页面</h1>
</div>
`,
};
let userParams = {
template: `
<div>
<h1>我是用户1的信息</h1>
</div>
`,
created () {
console.log('this.$route:', this.$route);
console.log('userId:', this.$route.params.userId);
// 此时可以发送ajax请求到后端获取数据
},
};
let userQuery = {
template: `
<div>
<h1>我是用户2的信息</h1>
</div>
`,
created () {
console.log('this.$route:', this.$route);
console.log('userId:', this.$route.query.userId);
// 此时可以发送ajax请求到后端获取数据
}
};
let App = {
// 下面的router-link会渲染成a标签，to为a标签的href属性，to后面的name指定的是路由别名
// 下面的router-view是页面内容的渲染出口
// 通过v-bind绑定路由名称, v-bind:to="{ ... }", 可简写为:to="{ ... }"
// 下面params与query参数分别对应上面所说的两种路径形式
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'userParams', params: {userId: 1 } }">登陆</router-link>
<router-link :to="{ name: 'userQuery', query: { userId: 2 } }">注册</router-link>
<router-view></router-view>
</div>
`,
};
// 创建一个vue-router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
// 1. xx.html/user/1
name: 'userParams',
path: '/user/:userId',
component: userParams,
},
{
// 2. xx.html/user/?userId=1
name: 'userQuery',
path: '/user',
component: userQuery,
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在跟实例中注册router对象
router: router,
components: {
App,
},
});
</script>
</body>
测试效果如下图：
子路由
<body>
<div id="app"></div>
<script>
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Test = {
template: `
<div>
<h1>我是测试页面</h1>
<router-link to="childpages01">子页面01</router-link>
<router-link to="childpages02">子页面02</router-link>
<router-view></router-view>
</div>
`,
};
let ChildPages01 = {
template: `
<div>
<h1>我是子页面01</h1>
</div>
`,
};
let ChildPages02 = {
template: `
<div>
<h1>我是子页面02</h1>
</div>
`,
};
let App = {
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'test' }">测试页面</router-link>
<router-view></router-view>
</div>
`,
};
// 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'test',
path: '/courses',
component: Test,
// children实现子路由(子页面)
children: [
{
path: 'childpages01',
component: ChildPages01,
},
{
path: 'childpages02',
component: ChildPages02,
},
],
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在根实例中注册router对象
router: router,
components: {
App,
},
});
</script>
</body>
测试效果如下图：
可见，使用此方法，子页面不能正常显示.
子路由之append
append参数会在路径后面追加子路由的路径，注意：会在后面一直追加.
append参数只适用于只需一层子路由的情况.
<body>
<div id="app"></div>
<script>
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Test = {
// 添加append参数
template: `
<div>
<h1>我是测试页面</h1>
<router-link to="childpages01" append>子页面01</router-link>
<router-link to="childpages02" append>子页面02</router-link>
<router-view></router-view>
</div>
`,
};
let ChildPages01 = {
template: `
<div>
<h1>我是子页面01</h1>
</div>
`,
};
let ChildPages02 = {
template: `
<div>
<h1>我是子页面02</h1>
</div>
`,
};
let App = {
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'test' }">测试页面</router-link>
<router-view></router-view>
</div>
`,
};
// 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'test',
path: '/test',
component: Test,
// children实现子路由(子页面)
children: [
{
path: 'childpages01',
component: ChildPages01,
},
{
path: 'childpages02',
component: ChildPages02,
},
],
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在根实例中注册router对象
router: router,
components: {
App,
},
});
</script>
</body>
测试效果如下图：
这里只点击了一次 子页面01，显示的内容是正常的，后面的路径也是正常的.
下面的是点击了两次：
可见，内容显示不正常了，后面的路径也不正常了——append参数会在后面一直添加子路由中的路径.
使用以上方式，路径是写死在属性中的，所以子路径会不断的append到最后面，导致后续访问不到响应的页面，可以采用另一种方式——动态绑定属性.
动态绑定属性
动态绑定属性即给子路由命名，使用子路由命的名称来实现子路径的正常切换.
<body>
<div id="app"></div>
<script>
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Test = {
// 使用子路由命的名称来实现子路径的正常切换
template: `
<div>
<h1>我是测试页面</h1>
<router-link :to="{ name: 'childpages01' }">子页面01</router-link>
<router-link :to="{ name: 'childpages02' }">子页面02</router-link>
<router-view></router-view>
</div>
`,
};
let ChildPages01 = {
template: `
<div>
<h1>我是子页面01</h1>
</div>
`,
};
let ChildPages02 = {
template: `
<div>
<h1>我是子页面02</h1>
</div>
`,
};
let App = {
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'test' }">测试页面</router-link>
<router-view></router-view>
</div>
`,
};
// 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'test',
path: '/test',
component: Test,
// children实现子路由(子页面)
children: [
{
// 给子路径命名
name: 'childpages01',
path: 'childpages01',
component: ChildPages01,
},
{
// 给子路径命名
name: 'childpages02',
path: 'childpages02',
component: ChildPages02,
},
],
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在根实例中注册router对象
router: router,
components: {
App,
},
});
</script>
</body>
注意：此方法必须使用name查找组件和路径的对应关系，而不能使用path.
子路由之append升级版
所谓的append升级版其实就是同时使用动态绑定属性和append.
<body>
<div id="app"></div>
<script>
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Test = {
// append升级版：<router-link :to="{ name: 'childpages01' }" append>...</router-link>
template: `
<div>
<h1>我是测试页面</h1>
<router-link :to="{ name: 'childpages01' }" append>子页面01</router-link>
<router-link :to="{ name: 'childpages02' }" append>子页面02</router-link>
<router-view></router-view>
</div>
`,
};
let ChildPages01 = {
template: `
<div>
<h1>我是子页面01</h1>
</div>
`,
};
let ChildPages02 = {
template: `
<div>
<h1>我是子页面02</h1>
</div>
`,
};
let App = {
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'test' }">测试页面</router-link>
<router-view></router-view>
</div>
`,
};
// 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'test',
path: '/test',
component: Test,
// children实现子路由(子页面)
children: [
{
// 给子路径命名
name: 'childpages01',
path: 'childpages01',
component: ChildPages01,
},
{
// 给子路径命名
name: 'childpages02',
path: 'childpages02',
component: ChildPages02,
},
],
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在根实例中注册router对象
router: router,
components: {
App,
},
});
</script>
</body>
子路由之非append
<body>
<div id="app"></div>
<script>
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Test = {
template: `
<div>
<h1>我是测试页面</h1>
<router-link to="/test/childpages01">子页面01</router-link>
<router-link to="/test/childpages02">子页面02</router-link>
<router-view></router-view>
</div>
`,
};
let ChildPages01 = {
template: `
<div>
<h1>我是子页面01</h1>
</div>
`,
};
let ChildPages02 = {
template: `
<div>
<h1>我是子页面02</h1>
</div>
`,
};
let App = {
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'test' }">测试页面</router-link>
<router-view></router-view>
</div>
`,
};
// 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'test',
path: '/test',
component: Test,
// children实现子路由(子页面)
children: [
{
// 子路由之非append(写全路径)
path: '/test/childpages01',
component: ChildPages01,
},
{
// 子路由之非append(写全路径)
path: '/test/childpages02',
component: ChildPages02,
},
],
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在根实例中注册router对象
router: router,
components: {
App,
},
});
</script>
</body>
路由重定向
<body>
<div id="app"></div>
<script>
// // 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Login = {
template: `
<div>
<h1>我是登陆页面</h1>
</div>
`,
};
let Pay = {
template: `
<div>
<h1>我是支付页面</h1>
</div>
`,
};
let App = {
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'login' }">登陆</router-link>
<router-link :to="{ name: 'pay' }">支付</router-link>
<router-view></router-view>
</div>
`,
};
// 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'login',
path: '/login',
component: Login,
},
{
name: 'pay',
path: '/pay',
// 使用redirect实现路由重定向
// 把a标签的锚点值和页面内容绑定了对应关系
redirect: '/login',
component: Pay,
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在根实例中注册router对象
router: router,
components: {
App,
}
});
</script>
</body>
如上代码，我们点击支付链接时，将会跳转至登陆页面.
手动路由
<body>
<div id="app"></div>
<script>
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Test = {
template: `
<div>
<h1>我是测试页面</h1>
</div>
`,
};
let App = {
// 使用v-on(简写为@)给按钮绑定一个事件
template: `
<div>
<router-link to="/">首页</router-link>
<button @click="myClick">点击跳转至测试页面</button>
<router-view></router-view>
</div>
`,
// 定义一个用于跳转至测试页面的的事件
methods: {
myClick: function () {
this.$router.push('/test');
}
},
};
// 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
routes: [
{
path: '/',
component: Home,
},
{
path: '/test',
component: Test,
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在根实例中注册router对象
router: router,
components: {
App,
}
});
</script>
</body>
如上代码，点击按钮即可跳转至测试页面.
路由钩子
<body>
<div id="app"></div>
<script>
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Login = {
template: `
<div>
<h1>我是登陆页面</h1>
</div>
`,
};
let Pay = {
template: `
<div>
<h1>我是支付页面</h1>
</div>
`,
};
let App = {
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'login' }">登陆</router-link>
<router-link :to="{ name: 'pay' }">支付</router-link>
<router-view></router-view>
`,
};
// 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'login',
path: '/login',
component: Login,
},
{
name: 'pay',
path: '/pay',
// 这一步骤将调用路由钩子函数(通过布尔值来判断是否调用该钩子函数)
meta: {required_login: true},
component: Pay,
},
],
});
// 定义一个路由钩子函数
// 通过router对象的beforeEach(function (to, form, next) {})
router.beforeEach(function (to, from, next) {
// to:从哪来
// from:到哪去
// next:下一步做什么
console.log('to:', to);
console.log('from:', from);
console.log('next:', next);
if (to.meta.required_login) {
next('/login');
} else {
next(); // 正常跳转
}
// router.afterEach(function (to, from) { ··· });
new Vue({
el: '#app',
template: `<App/>`,
// 在根实例中注册router对象
router: router,
components: {
App,
}
});
</script>
</body>
如上代码，通过路由钩子函数实现了点击支付链接时跳转至登陆页面的功能.
在路径中去掉"#"号
在实例化的router对象中增加一个属性：mode: 'history'，该属性可将路径中显示的"#"号去掉.
<body>
<div id="app"></div>
<script>
// 在Vue根实例中使用VueRouter
Vue.use(VueRouter);
let Home = {
template: `
<div>
<h1>我是首页</h1>
</div>
`,
};
let Login = {
template: `
<div>
<h1>我是登陆页面</h1>
</div>
`,
};
let Pay = {
template: `
<div>
<h1>我是支付页面</h1>
</div>
`,
};
let App = {
template: `
<div>
<router-link :to="{ name: 'home' }">首页</router-link>
<router-link :to="{ name: 'login' }">登陆</router-link>
<router-link :to="{ name: 'pay' }">支付</router-link>
<router-view></router-view>
`,
};
// 实例化一个router对象(本质上是将路径和页面内容绑定了对应关系)
let router = new VueRouter({
// 使用mode: 'history'实现取去掉路径中显示的"#"号
mode: 'history',
routes: [
{
name: 'home',
path: '/',
component: Home,
},
{
name: 'login',
path: '/login',
component: Login,
},
{
name: 'pay',
path: '/pay',
component: Pay,
},
],
});
new Vue({
el: '#app',
template: `<App/>`,
// 在根实例中注册router对象
router: router,
components: {
App,
}
});
</script>
</body>
"
【Vue路由系统详述】的更多相关文章
- 10.3 Vue 路由系统
Vue 路由系统 简单示例 main.js import Vue from 'vue' import App from './App.vue' //https://router.vuejs.or ...
- Vue路由系统
Vue路由系统 一切分离都是为了更好的结合,本文详细介绍了前后端分离架构之后,前端如何实现路由控制,即Vue路由系统. 一.VueRouter实现原理 VueRouter的实现原理是根据监控锚点值的改 ...
- Vue专题-路由系统
一切分离都是为了更好的结合,本文详细介绍了前后端分离架构之后,前端如果实现路由控制,即Vue路由系统. Vue路由系统 VueRouter实现原理 VueRouter的实现原理是根据监控锚点值的改变, ...
- Vue.js之路由系统
Vue.js生态之vue-router vue-router是什么? vue-router是Vue的路由系统,定位资源的,我们可以不进行整页刷新去切换页面内容. vue-router的安装与基本配置 ...
- vue学习之六路由系统
一.vueRouter实现原理 VueRouter的实现原理是根据监控锚点值的改变,从而不断修改组件内容来实现的,我们来试试不使用VueRouter,自己实现路由控制,如下代码: <!DOCTY ...
- 简简单单的Vue3（插件开发，路由系统，状态管理）
既然选择了远方,便只顾风雨兼程 __ HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 插件 路由(vue-router) 状态管理模式(Vuex) 那在上篇文章,我们讲了, ...
- 04Vue.js路由系统
Vue.js路由系统: https://pizzali.github.io/2018/10/28/Vue.js%E8%B7%AF%E7%94%B1%E7%B3%BB%E7%BB%9F/
- Vue.js—组件快速入门及Vue路由实例应用
上次我们学习了Vue.js的基础,并且通过综合的小实例进一步的熟悉了Vue.js的基础应用.今天我们就继续讲讲Vue.js的组件,更加深入的了解Vue,js的使用.首先我们先了解一下什么是Vue.js ...
- vue 路由里面的 hash 和 history
对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求. ...
随机推荐
- dataTables插件的使用
用到dataTables这个插件还是因为Metronic这个框架里有用到,不然我不会选择它的,为啥呢?就感觉它的文档有点复杂(当然,也有我智商不够用的原因):既然用了,那就说说我遇到的问题吧,以防下次 ...
- Harvard's CS50
最近看了哈佛大学David主讲的计算机科学入门,给我一个最大的感受是计算机编程语言真的不重要,重要的是编程者的思想. 1.同一个问题可以就Scratch解决,也可以用C,用Python,用JavaSc ...
- 【Linux】iptables相关实践，原理及参数解释
1.禁止指定IP地址的主机进行连接 iptables -I INPUT -s .***.***. -j DROP 2.解除禁止指定IP地址的主机进行连接 iptables -D INPUT -s .* ...
- ASPxDashboardViewer_OnDashboardLoaded 修改Item参数
protected void ASPxDashboardViewer_OnDashboardLoaded(object sender, DashboardLoadedWebEventArgs e) { ...
- No serializer found for class org.hibernate.proxy.pojo.bytebuddy.ByteBuddyInterceptor
使用jpa做增删改查的时候出现了这个异常,原因是转化成json的时候,fasterxml.jackson将对象转换为json报错,发现有字段为null 解决方案:实体类上添加 @JsonIgnoreP ...
- 【css】用css巧妙实现移动端横向滑动展示功能
前言:记得以前处理移动端横向滑动展示都是去用js去解决的,要用js进行蛮多处理,要算li的宽度,然后还要用js设置ul盒子的宽度,又要设置最大滑动距离,最小滑动距离等等.......但是现在发现用cs ...
- linux环境jacoco接入
我们通常会将测试覆盖率分为两个部分,即“需求覆盖率”和“代码覆盖率”. 需求覆盖:指的是测试人员对需求的了解程度,根据需求的可测试性来拆分成各个子需求点,来编写相应的测试用例,最终建立一个需求和用例的 ...
- machinekey相关信息
在session共享时必须将web.config中的machineKey配置为相同的加解密算法 <system.web> <machineKey decryptionKey=&quo ...
- 利用数据结构排序的priority_queue
考虑以下几个问题: 将一个序列排序 某神仙: \(\mathtt{sort}\) !!! 每次取出最前面的两个数 某神仙: \(a_i\) 和 \(a_{i+1}\) 啊!! 相加,再加入序列 某神仙 ...
- CMD命令行实现复制一张图片1000份：
CMD命令行实现复制一张图片1000份: 进入CMD命令行后,进入图片所在目录,执行以下命令: FOR /L %i IN (,,) DO COPY .jpg %i.jpg 模板图片名字为1.jpg,执 ...