开发项目经验总结

开发项目遇到的坑

1.如何格式化 art-template 模板中的时间

1.1 使用场景

<span class="activeTime">{{ $value.created | date }}</span>
// $value.created 代表的是需要格式化的时间
// 中间使用 或运算符 分隔
// date  代表的是 处理日期格式化的方法

1.2 处理事件日期的方法需自己定义，如下：

// 引入轻量型 日期处理框架 dayjs.js
<script src="https://unpkg.com/dayjs"></script>
     <!-- 格式化模板中的时间 -->
<script>
      // 时间格式化函数
      function date(val){
        	return dayjs(val).format("YYYY-MM-DD HH:MM")
      }
</script>

2.使用 swiper.js 插件时，如何解决通过循环生成 swiper-slide 之后，初始化 swiper 不生效的问题。

2.1 解决问题的办法

• 需要将 swiper 初始化的 script 语句 紧紧的放在 轮播图模板语句 的下方

2.2 轮播图模板实例

<script id="second-banner" type="text/html">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                {{ each data.funData.banners }}
                <div class="swiper-slide" id="{{ $index }}">
                    <!-- 跳转地址 -->
                    <a href="{{ $value.url }}" target="_blank">
                        <!-- 轮播图 -->
                        <img src="{{ $value.img }}" alt="" style="width:100%;height: 200px">
                    </a>
                </div>
                {{ /each }}
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </script>

2.3 swiper 初始化实例

 <script>
        window.onload = function () {
            var mySwiper = new Swiper('.swiper-container', {
                speed: 1000,
                autoplay: 3000,
                autoHeight: true,
                loop: true,//是否循环播放
                pagination: ".swiper-pagination",
                paginationClickable: true,
                effect: 'slide',//动画效果
            })
        }
    </script>

3. 如何在 mongoose 设置属性唯一约束，并且在处理字段不为一时发生的错误

3.1 设置 属性唯一

• 只需在需要设置的属性中加上 : unique:true 这一句就 OK 了，如下：

name:{
        type:String,
        unique:true // 
    },

3.2 如何捕获 字段不唯一 的错误

• 使用 try-catch 语句

// 新建 新闻分类 接口
    router.post("/create",async(req,res)=>{
        try{
            const model = await req.Model.create(req.body)
            res.send(model)
        }catch(e){
            // 当数据库 抛出错误时，返回一个 json 对象 里面包含错误状态码 statusCode,message
            res.send({
                statusCode:0,
                message:"用户名已存在"
            })
        }
    })

4. art-template 常见报错原因

4.1 template 的参数只需传入 id名即可，不需

 <script id="search-art" type="text/html"></script>

// 在注册模板时只需填写 "search-art"即可 ，不需 "#search-art"
 var artStr = template("search-art",{
     data:data
 })
     
     

4.2 传递参数时，需要传递一个对象

<script id="search-art" type="text/html"></script>

// 假设需要传递给 art-template 的值是一个对象
 var artStr = template("search-art",{
     data:data
 })

5. art-template 如何渲染数据中包含 html 标签的数据

5.1 问题描述

• 渲染的数据中包含 html 标签的，渲染到页面上时，将标签当做字符串。

// 问题例子
{{ each data }}
<div class="article-list">
    <div class="article-title">{{ $value.title }}</div>
	// 这样渲染出来的页面就是一串包含 HTML 标签的字符串
    <div class="artilce-context">{{ $value.context }}</div> 
	
</div>

5.2 解决办法

在该数据名前 加上 # 符,例：假设文章内容中，包含 html 标签

// 解决办法
{{ each data }}
<div class="article-list">
    <div class="article-title">{{ $value.title }}</div>
	// 加上 # 即可解决上述问题
    <div class="artilce-context">{{ #$value.context }}</div> 
</div>

6. vue-cli3启动服务配置

6.1 修改默认端口号

• 所需修改文件所在目录：[email protected]\cli-service\lib\commands
• 需要修改的文件：serve.js
• 默认端口号为：8080 ，可以修改为其他任意的端口号（特殊端口号除外）

6.2 设置启动服务后，自动打开浏览器

• 找到 package.json文件
• 找到配置项scripts
• 找到子配置项serve
• 修改下，加个字段 --open
• 即j将"serve": "vue-cli-service serve" 修改为"serve": "vue-cli-service serve --open"