2项目目录设计

svg图片不会直接使用,而是生成图标字体来使用。生成图标字体的网站https://icomoon.io/icons.html。

图标字体的code如下所示

项目的所有文件都放在src文件夹。main.js文件是整个项目的入口文件,app.vue是整个页面的vue实例文件。src文件下会新建一个xommon文件,用来包含项目公共的文件和资源,common文件夹下新建三个目录,fonts,js,stylus。stylus是一个CSS预处理器,styl文文件和CSS文件相比,styl文件不需要分号,冒号也可以省略,但为了便于阅读保留分号。components文件下是各个组件的文件(注意组件的就近维护原则)。

用json文件来模拟后台数据,json文件中的数据主要包含三个对象,seller,goods,ratings。

在build->dev-server.js文件中获取json文件中的数据,定义路由apiRoutes

var appData = require("../data.json");
var seller = appData.seller;
var goods = appData.goods;
var ratings = appData.ratings;

var apiRoutes = express.Router();

errno参数表示是否有错误,errno:0表示数据正确。data是返回的数据。

apiRoutes.get(‘/seller‘, function (req, res) {
res.json({
errno: 0,
data: seller
});
});

apiRoutes.get(‘/goods‘, function (req, res) {
res.json({
errno: 0,
data: goods
});
});

apiRoutes.get(‘/ratings‘, function(req, res) {
res.json({
errno: 0,
data: ratings
});
});

用use请求到数据

app.use(‘/api‘, apiRoutes);

时间: 2024-12-17 21:48:36

2项目目录设计的相关文章

MVVM 模式下iOS项目目录结构详细说明

?更多技术干货请戳:听云博客 我们在做项目的时候,会经常用到各种设计模式,最常见的要数 MVC (模型,视图,控制器)了.但是,今天我们要说的是另一种设计模式——MVVM. 所以 MVVM 到底是什么?下面,我们将结合代码,说明 MVVM 设计模式以及项目目录结构. 一.MVVM 模式介绍  MVVM 是 Model-View-View Model 的缩写,MVVM 听起来好像很复杂的样子,但它本质上就是MVC 的改进版.MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图 UI 和

百度Baidu EFE team的前端规范——项目目录结构规范

项目目录结构规范 简介 该文档主要的设计目标是项目开发的目录结构保持一致,使容易理解并方便构建与管理. 编撰 李玉北.erik.黄后锦.王杨.张立理.赵雷.陈新乐.刘恺华. 本文档由商业运营体系前端技术组审校发布. 要求 在本文档中,使用的关键字会以中文+括号包含的关键字英文表示:必须(MUST).关键字"MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT"

django 前端传文件到后台项目目录

Html端: <form action="/student/upload" method="POST" enctype="multipart/form-data">{% csrf_token %} <input name="photo" enctype="multipart/form-data" type="file" accept="image/jpeg,i

Go项目目录管理

在Go的官网文档How to Write Go Code中,已经介绍了Go的项目目录一般包含以下几个: src 包含项目的源代码文件: pkg 包含编译后生成的包/库文件: bin 包含编译后生成的可执行文件. 可以通过下面的例子来说明工程目录的组织管理.(Windows 7 64位,go version go1.3.3 windows/amd64) 1. 创建一个库文件 创建一个库文件a.go并保存在scr目录的一个子目录下面. package myfunc import "fmt"

Android项目目录结构分析

项目结构如下图所示,使用不同sdk版本建立的项目项目结构有所不同,总体相同,高版本增加了一些包结构 1.src 和java项目一样src存放项目源代码 2.gen 自动生成,其中R.java文件也是自动生成,ADT 插件自动根据res中文件的变化修改R.java文件,将res中的资源对应一个16进制地址,用于在在代码中引用到这些资源文件. 3.bin 项目编译输出的目录,里面有apk文件 4.res 存放资源文件 a. drawable存放图片 (1)drawable-hdpi里面存放高分辨率的

Laravel项目目录结构说明

Laravel项目目录结构说明: |- vendor 目录包含你的 Composer 依赖模块及laravel框架. |- bootstrap 目录包含几个框架启动跟自动加载配置的文件. |- app.php |- autoload.php |- config 应用程序的配置文件. |- database 数据库迁移与数据填充文件. |- public 项目web入口和静态资源文件 (图片.js.css,字体等等). |-index.php 入口 |- resources 目录包含视图.原始的资

JavaWeb学习之tomcat安装与运行、tomcat的目录结构、配置tomcat的管理用户、web项目目录、虚拟目录、虚拟主机(1)

1.tomcat安装与运行双击tomcat目录下的bin/startup.bat,启动之后,输入http://localhost:8080,出现安装成功的提示,表示安装tomcat成功 2.tomcat的目录结构* bin目录:存放tomcat的启动和终止脚本 * startup.bat 启动脚本 * bootstrap.jar,启动脚本最终执行的java程序 * org.apache.catalina.startup.Bootstrap * shutdown.bat 终止脚本 * conf目录

安卓学习经验—项目目录

安卓项目目录结构: Assets  :  资产目录:存放文件,这些文件会被打包到APK文件中 Bin       :  编译后的文件目录 Gen      :  自动生成的文件目录 Project.properties: 代表编译的版本,对于安卓jar包版本 libs:支持的jar包,会被添加到android depend目录 res:资源目录(根据DPI分为  h:高分辨率   m:中分辨率   l:低分辨率   x:大分辨率   xx:超大分辨率,会在R文件中生成一个ID) (1)drawa

基于Maven管理的JavaWeb项目目录结构参考

通常在创建JavaWeb项目时多多少少都会遵循一些既定的比较通用的目录结构,下面分享一张基于Maven管理的JavaWeb项目目录结构参考图: 上图仅是参考,不同项目不同团队都有自己的约定和规范. 个人体会: 项目目录结构一旦约定和规范之后,每个团队成员自我约束和遵守规范才是整个目录结构不随项目的进展而变得越来越不清晰的根本.