目前,我将Vuetify用于基本组件,并希望创建可重用的扩展。例如,包含复选框的列表,具有某些功能的数据表列等。
对于这个问题,我将以包含复选框的列表为例。我创建了以下名为CheckboxGroup.vue的组件
<template>
<v-container>
<v-checkbox
v-for="(item, index) in items"
:key="index"
v-model="item.state"
:label="item.title"
></v-checkbox>
</v-container>
</template>
<script>
export default {
props: {
items: Array,
required: true
}
};
</script>
Run Code Online (Sandbox Code Playgroud)
该组件将对象数组作为属性,并为每个条目创建一个复选框。
重要部分是v-model="item.state"和:label="item.title"。在大多数情况下,该state属性将具有不同的名称,与该title属性相同。
为了进行测试,我创建了一个名为Home.vue的视图文件,其中包含一系列文档。
<template>
<v-container>
<CheckboxGroup :items="documents"/>
<v-btn @click="saveSettings">Save</v-btn>
</v-container>
</template>
<script>
import CheckboxGroup from "../components/CheckboxGroup";
export default {
components: {
CheckboxGroup
},
data: function() {
return {
documents: [
{
id: 1,
name: …Run Code Online (Sandbox Code Playgroud) 我有一个使用 Typescript 和 Jest 的 Node 项目。目前我有这个项目结构
有了这个tsconfig.json文件
"compilerOptions": {
"target": "ES2017",
"module": "commonjs",
"allowJs": true,
"outDir": "dist",
"rootDir": "src",
"strict": true,
"moduleResolution": "node",
"esModuleInterop": true
}
Run Code Online (Sandbox Code Playgroud)
这个jest.config.js文件
module.exports = {
clearMocks: true,
coverageDirectory: "coverage",
testEnvironment: "node",
};
Run Code Online (Sandbox Code Playgroud)
和这个package.json文件
{
"scripts": {
"start": "node dist/App.js",
"dev": "nodemon src/App.ts",
"build": "tsc -p .",
"test": "jest"
},
"dependencies": {
"commander": "^3.0.1"
},
"devDependencies": {
"@types/jest": "^24.0.18",
"@types/node": "^12.7.4",
"jest": "^24.9.0",
"nodemon": "^1.19.2",
"ts-jest": "^24.0.2",
"ts-node": "^8.3.0", …Run Code Online (Sandbox Code Playgroud) 我是Nextcloud应用程序开发的新手,并且想创建一个简单的应用程序来玩。我看到有些应用是用Vue.js制作的,所以我问那里是否有指南?
我生成了一个应用程序框架,并使用了PHP模板,但是不幸的是,我不了解PHP,并且想在现有的演示应用程序中创建一个Vue.js项目。
我为Nextcloud找到了一些预制的Vue组件
https://github.com/nextcloud/nextcloud-vue
但是没有创建骨架应用程序后如何设置Vue项目的分步指南。我刚刚看到Nextcloud应用程序Tasks在PHP代码中也使用了Vue.js:
https://github.com/nextcloud/tasks
非常感谢您的帮助。
我想在调用控制器逻辑之前验证我的Express路由。我使用joi并创建了一个验证器,该验证器能够针对架构对象验证Request对象
import { Request, Response, NextFunction } from 'express';
import joi, { SchemaLike, ValidationError, ValidationResult } from '@hapi/joi';
import { injectable } from 'inversify';
@injectable()
export abstract class RequestValidator {
protected validateRequest = (validationSchema: SchemaLike, request: Request, response: Response, next: NextFunction): void => {
const validationResult: ValidationResult<Request> = joi.validate(request, validationSchema, {
abortEarly: false
});
const { error }: { error: ValidationError } = validationResult;
if (error) {
response.status(400).json({
message: 'The request validation failed.',
details: error.details
});
} else {
next(); …Run Code Online (Sandbox Code Playgroud) I'm creating an API for multiple customers. The core endpoints like /users are used by every customer but some endpoints rely on individual customization. So it might be that User A wants a special endpoint /groups and no other customer will have that feature. Just as a sidenote, each customer would also use his own database schema because of those extra features.
I personally use NestJs (Express under the hood). So the app.module currently registers all my core modules …
我用基本路径创建了一个新的Vue应用程序。由于该应用程序已嵌入到另一个Vue应用程序中,因此该应用程序router-view在启动时不会呈现。如果您想了解更多有关如何或为何将此应用程序嵌入到另一个应用程序中的信息,请在此处查看:
我对这个问题的回答:
启动我的应用程序时,它将呈现除以外的所有内容router-view。我想在启动时通过给定的浏览器URL进行重定向。这是我的路由器配置:
import Vue from 'vue';
import Router from 'vue-router';
import One from './views/One.vue';
import Two from './views/Two.vue';
Vue.use(Router);
const router = new Router({
base: '/my-embedded-app/',
mode: 'history',
routes: [
{
path: '/',
component: One,
},
{
path: '/two',
component: Two,
},
],
});
router.replace(router.currentRoute.fullPath);
export default router;
Run Code Online (Sandbox Code Playgroud)
我希望应用程序在调用时呈现组件Two.../my-embedded-app/two。不幸的是,router.replace总是重定向到/(因此浏览器URL是.../my-embedded-app/)。我调试了router,发现路径是/,但是我希望它是/two。
重要说明:/two url为时,
我不想将用户重定向到/。我只想Two …
目前我有一个levels包含其他数组的数组level,这些数组包含stages.
我想用一个名为的新属性映射一个级别内的所有对象position.此位置返回距阵列中心的距离.按中心我的意思是长度/ 2.
如果数组长度是偶数,我想要以下范围
...... -3.5,-2.5,-1.5,-0.5,0.5,1.5,2.5,3.5 ......
如果数组长度不均匀,我想要以下范围
...... -4,-3,-2,-1,0,1,2,3,4 ......
我开始创造这个
const distanceLevels = [
[{
"id": 1
}, {
"id": 8
}],
[{
"id": 2
}],
[{
"id": 3
}, {
"id": 4
}, {
"id": 5
}, {
"id": 7
}],
[{
"id": 6
}]
];
function getViewLevels() {
const viewLevels = []; // the new array as the result
distanceLevels.forEach(level => { // one level containing …Run Code Online (Sandbox Code Playgroud)我想为我的项目使用mssql数据库。我使用了node-mssql模块(https://www.npmjs.com/package/mssql),并使用Microsoft SQL Server Management Studio 17进行数据库管理。
执行某些查询时,我不想多次连接到数据库,所以我想创建一个池来与数据库建立永久连接。
我的数据库管理器模块:
const sql = require('mssql');
const db = require('../config/database.js');
const pool = new sql.ConnectionPool(db).connect();
Run Code Online (Sandbox Code Playgroud)
我的数据库配置:
module.exports = {
user: process.env.DB_USER || 'sa',
password: process.env.DB_PASS || '-- myPassword --',
server: process.env.DB_SERVER || 'localhost',
database: process.env.DB || 'local_demo_cobra',
};
Run Code Online (Sandbox Code Playgroud)
MSSQL Studio我将身份验证模式更改为SQL Server身份验证
在这里您可以看到服务器管理的数据库
尝试运行代码时出现错误
ConnectionError:无法连接到本地主机:1433-无法连接(顺序)
该数据库在我自己的系统上运行,因此localhost应该可以使用。我还尝试将服务器配置更改为
server: process.env.DB_SERVER || 'localhost\\AP-MHERMSEN',
Run Code Online (Sandbox Code Playgroud)
但这会引发相同的错误
ConnectionError:无法连接到localhost \ AP-MHERMSEN
有什么问题或遗漏?
我目前将Vue应用渲染为Vue应用。我是通过将子应用程序的index.html文件嵌入到主应用程序的div容器中来实现的。
<template>
<div id="customAppContainer"></div>
</template>
<script>
export default {
mounted() {
this.updateCustomAppContainer();
},
methods: {
updateCustomAppContainer() {
const fullRoute = this.$router.currentRoute.fullPath;
const routeSegments = fullRoute.split("/");
const appsIndex = routeSegments.indexOf("apps");
const appKey = routeSegments[appsIndex + 1];
document.getElementById(
"customAppContainer"
).innerHTML = `<object style="width: 100%; height:100%;" data="http://localhost:3000/subApps/${appKey}"></object>`;
}
},
watch: {
$route(to, from) {
this.updateCustomAppContainer();
}
}
};
</script>
Run Code Online (Sandbox Code Playgroud)
如果您想了解更多信息,请在这里看看
我对这个问题的回答
我的子应用在的object标记中呈现,customAppContainer具有自己的路线,基本路线是
export default new Router({
base: '/my-first-custom-app/',
mode: 'history',
routes: [
{
path: '/',
component: PageOne, …Run Code Online (Sandbox Code Playgroud) 关于if语句,可以重构此代码
(这只是一个示例,并未引用“真实”代码)
if(person === 'customer' || person === 'employee' || person === 'other')
Run Code Online (Sandbox Code Playgroud)
至
if(person === ('customer' || 'employee' || 'other'))
Run Code Online (Sandbox Code Playgroud)
目前,我有一个state包含3个布尔属性的对象。如果至少有一个属性返回,我想显示一个覆盖图true。我当前的解决方案是
showOverlay: state => state.isNavigating || state.isHttpRequesting || state.isProcessing
Run Code Online (Sandbox Code Playgroud)
我在问是否有办法清理它。伪代码将是
showOverlay: state => (isNavigating || isHttpRequesting || isProcessing) of state
Run Code Online (Sandbox Code Playgroud)
我知道不会有什么大的收获,但是它将删除所有state. ...部分。
javascript ×8
vue.js ×4
node.js ×3
express ×2
typescript ×2
vuejs2 ×2
api ×1
arrays ×1
html ×1
jestjs ×1
joi ×1
nestjs ×1
nextcloud ×1
php ×1
rest ×1
sql-server ×1
vue-router ×1
vuetify.js ×1