首页问答专栏课程
izengx

izengx 查看完整档案

47声望
广州编辑  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑

有失去的 该进阶的
有遗憾的 该进阶的
放不下的 该进阶的

加关注 发私信
关注了10 人
粉丝2 人

高分内容

概览提问回答文章

查看全部 提问、回答、文章 →

个人动态

izengx 回答了问题 · 12月2日

小程序页面的项目结构？

我觉得你们的分的文件夹可以再建一层、统一归类。

search、searchResult，假如是course相关的，可以建一个course的文件夹，然后把courseDetail、search、searchResult统一归类到该文件夹下。
像这样：
图片.png

至于tabBar，建议在page同一级建一个components文件夹，放到里面。

关注 3 回答 2

izengx 关注了用户 · 12月1日

迈克丝 @max_xu

一步一步学技术,踏踏实实涨经验,兴趣广泛,广交好友,希望大家多多指正/批评.

关注 3

izengx 发布了文章 · 12月1日

vue项目实用方法

目录说明

|-- public
|-- src                             项目开发目录
    |-- api                         接口目录
        |-- request.js              
        |-- api.js                  接口
    |-- assets                      静态文件
        |-- image
        |-- css
            |-- _variables.scss     全局sass变量定义文件
        |-- js
            |-- config.js           全局js变量定义文件
            |-- fieldParam.js       自定字段
    |-- components                  组件存放目录
    |-- i18n                        国际化
    |-- router                      router
        |-- meta.js                 route的配置文件
    |-- store                       vuex
    |-- utils                       自定工具
    |-- views                       视图目录
    |-- App.vue                     主入口
    |-- main.js                     主入口
|-- package.json                    依赖库
|-- package-lock.json               锁定安装包的具体版本号
|-- vue.config.js                   vue配置文件
|-- .env                            环境配置
|-- .env.test                       
|-- .env.production

vue.config.js

let path = require('path');
let packageData = require('./package.json');
let CompressionPlugin = require('compression-webpack-plugin');
let timestamp = new Date().getTime();
let staticDeclare = ``;
let needPackage = !process.env.NODE_ENV.match('development');

function resolve(dir) {
    return path.join(__dirname, dir)
}

if (needPackage) {
    staticDeclare = `${process.env.VUE_APP_STATIC_URL}/${process.env.VUE_APP_PACKAGE_DIR}/`;
}

module.exports = {
    publicPath: staticDeclare,      // 静态资源加载的路径
    outputDir: `${__dirname}/dist/${process.env.NODE_ENV}/${process.env.VUE_APP_CODE.toLowerCase()}`,      // 打包的dist目录文件名
    // indexPath: 'index.html',          // 入口文件index.html的名字
    // assetsDir: 'static',         // img/fonts等不会变内容的资源的文件夹
    productionSourceMap: false,
    chainWebpack: config => {
        //设置别名
        config.resolve.alias
            .set('@', resolve('src'))
    },
    devServer: {
        disableHostCheck: true,    // 非localhost访问时，绕过主机检查
        host: 'dev.hostname.com',
        open: true,  //打开浏览器窗口
        proxy: {
            '/api/service': {
                target: 'http://test.hostname.com:9000',  // 本地跨域访问测试环境接口
                changeOrigin: true,        // 是否跨域
                pathRewrite: {
                    '/api/service': '',
                }
            },
        }
    },
    //定义scss全局变量
    css: {
        loaderOptions: {
            sass: {
                prependData: `@import "@/assets/css/_variables.scss";`
            },
        },
        extract: {
            // ${staticDeclare}css/
            filename: `css/[name]_${packageData.version}_${timestamp}.css`,
            chunkFilename: `css/[name]_${packageData.version}_${timestamp}.css`
        },
    },
    configureWebpack: () => {
        // 打包时压缩成gzip格式
        if (needPackage) {
            return {
                plugins: [new CompressionPlugin({
                    test: /\.js$|\.html$|\.css/,
                    threshold: 10240,
                    deleteOriginalAssets: false
                })],
                output: {
                    filename: `js/[name]_${packageData.version}_${timestamp}.js`,
                    chunkFilename: `js/[name]_${packageData.version}_${timestamp}.js`
                },
                // 此配置需要index.html文件配合增加引入外部框架，以减小打包的大小
                externals: {
                    'vue': 'Vue',
                    'vuex': 'Vuex',
                    'vue-router': 'VueRouter',
                    'axios': 'axios',
                    'element-ui': 'ELEMENT'
                },
                // externals中的key是用于import，value表示的在全局中访问到该对象，就是window.echarts
            }
        } 
    }
}

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>declare</title>
</head>

<body>
    <noscript>
        <strong>We're sorry but declare doesn't work properly without JavaScript enabled. Please enable it to
            continue.</strong>
        <strong>很抱歉，如果未启用JavaScript，则网站无法正常工作。请启用它以继续浏览。</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <% if (!process.env.NODE_ENV.match('development')) { %>
    <script data-original="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script data-original="https://cdn.bootcdn.net/ajax/libs/vuex/3.2.0/vuex.min.js"></script>
    <script data-original="https://cdn.bootcdn.net/ajax/libs/vue-router/3.1.3/vue-router.min.js"></script>
    <script data-original="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <script data-original="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.1/index.js"></script>
    <% } %>
</body>

</html>
查看原文

赞 0 收藏 0 评论 0

izengx 发布了文章 · 12月1日

Windows下，使用bat批量依次执行打包命令

@echo off

REM 生成的文件存放的目录
set fromPosition=".\dist\production"
REM 生成的文件的入口文件所存放的目录
set toPosition=".\dist\production\_uploadFile"

set lastIndex=1
set projectName0=common
set projectName1=gansu

for /L %%i in (0,1,%lastIndex%) do (

  for /F "usebackq delims==. tokens=1-3" %%J IN (`set projectName%%i`) do (

    REM 打包
    call npm run build:%%K:production

    REM 清理
    del /Q "%toPosition%\%%K\*.*"
    rmdir /Q "%toPosition%\%%K"

    REM REM 生成
    mkdir "%toPosition%/%%K"
    copy /y "%fromPosition%\%%K\index.html" "%toPosition%\%%K\index.html"
  )

)

pause
查看原文

赞 0 收藏 0 评论 0

izengx 回答了问题 · 12月1日

解决vue异步请求问题

1、把 window.jsCallBack = this.jsCallBack 放到异步获得swiperList数据后，再去绑定和执行jsCallBack()。
2、如果期间就有触发jsCallBack的需求，建议另外加一个弹窗提示“组件加载中”之类的。

关注 7 回答 6

izengx 回答了问题 · 12月1日

解决vue初学者的几个疑问

1.登录注册浏览等等的界面功能都是以VUE组件的存在，如何才能修改成page的方式存在？

如果登录注册等是一个独立页面，直接放page貌似也没啥问题；
如果是弹窗的形式，其实放components里好点，非要放到page里当然也可以。

2.每次新增一个组件，都需要去路由里去注册下，挺麻烦的，能否自动去注册？

NuxtJS

3.因为现在都是组件，所以这些功能界面之间的链接都是以to路由名称的方式。假如修改成page后，岂不是全部失效了？

如果注册的路由没变化，to就不需要改变，但需要注意的是，改成page了，路由里的引入路径需要调整

4.假如就按照目前cli2组件的方式，将登陆注册浏览....全部写组件后。是否符合规范，项目完成后打包上传到服务器上，会不会有什么问题？

这个的看实际情况，能本地完成开发，打包上线应该没啥问题

关注 4 回答 2

izengx 回答了问题 · 12月1日

el-table-column超出显示省略号，在mac和windows显示结果不一致

平台默认字体不一致导致文字宽度不一致，如果要改显示字体，可以修改css里

body{
    font-family: xxx;  // xxx设置成你想优先显示的字体，浏览器会自动往后匹配电脑安装过的字体
}

关注 2 回答 2

izengx 赞了回答 · 12月1日

ES6 async函数里包含另一个async函数是为什么？

如果只有外层函数是 async 函数的话，内层函数里写的 await 会报语法错误。
可以简单粗暴地认为 async 有类似作用域的影响范围，这个范围仅包括函数自己的函数体，而不包括其函数体内部声明的其他函数体。

关注 3 回答 3

izengx 赞了回答 · 12月1日

ES6 async函数里包含另一个async函数是为什么？

async 是函数的一种类型，每一个都要写，不写就不是。

并不是说 async 函数里定义的函数就是 async 函数。

关注 3 回答 3

izengx 发布了文章 · 11月26日

连接mongo数据库操作

命令行进入mongo数据库
mongo

查看所有数据库
show dbs

新建（或已有）fruit数据表并新增数据
db.fruits.save({name: 'apple', price: 5});

查找
db.fruits.find({price: 5})

查看该数据库所有的表
db.getCollectionNames()

连接mongo数据库操作

conf.js
module.exports = {
    url: 'mongodb://127.0.0.1:27017',
    dbName: 'local',
}
db.js
const conf = require('./conf');
const { EventEmitter } = require('events');   // 数据库异步连接工具

// 客户端
const { MongoClient } = require('mongodb');
class Mongodb {
    constructor(conf) {
        this.conf = conf;
        this.emmiter = new EventEmitter();
        // 连接
        this.client = new MongoClient(conf.url, {
            useNewUrlParser: true,
        })

        this.client.connect(err => {
            console.log(err);
            if (err) {
                throw err;
            }
            console.log('连接正常');
            this.emmiter.emit('connect')
        })
    }
    col(colName, dbName = conf.dbName) {
        return this.client.db(dbName).collection(colName);
    }

    once(event, cb) {
        this.emmiter.once(event, cb)
    }
}
module.exports = new Mongodb(conf)
initData.js
const mongodb = require('./models/db');
mongodb.once('connect', async () => {
    const col = mongodb.col('fruits');
    // 删除已存在的数据
    await col.deleteMany();
    const data = new Array(100).fill().map((value, index) => {
        return {
            name: 'XXXX' + index,
            price: index,
            category: Math.random() > 0.5 ? '蔬菜' : '水果',
        }
    })
   
    await col.insertMany(data);
    console.log('插入测试数据成功');
    
})

api使用

(async () => {
    const {MongoClient: MongoDB} = require('mongodb');
   
    // 创建客户端
    const client = new MongoDB(
        'mongodb://localhost:27017', 
        {
            useNewUrlParser: true,
        }
    )
   
    let ret;
    // 创建连接
    ret = await client.connect();
    console.log('connect: ', ret);
   
    const db = client.db('local');
    const fruits = db.collection('fruits')
    
    // 删除
    ret = await fruits.deleteMany();
    
    // 添加文档
    ret = await fruits.insertOne({
        name: 'mango',
        price: 20.1
    })
    console.log('插入成功', ret.ops)
   
    // 查询
    ret = await fruits.findOne({
        name: 'mango'
    })
    console.log('查询', ret)

    // 更新
    ret = await fruits.updateOne({
        name: 'mango'
    }, {
        $set: {
            name: 'apple'
        }
    })
    console.log('更新', JSON.stringify(ret))
})()
查看原文

赞 0 收藏 0 评论 0

查看全部 个人动态 →

认证与成就

  • 获得 1 次点赞
  • 获得 7 枚徽章 获得 0 枚金徽章, 获得 1 枚银徽章, 获得 6 枚铜徽章

擅长技能
编辑

(ﾟ∀ﾟ　)
暂时没有

开源项目 & 著作
编辑

(ﾟ∀ﾟ　)
暂时没有

注册于 2017-09-15
个人主页被 531 人浏览