从壹开始 [ Nuxt.js ] 之二 || 项目搭建 与 接口API

npx create-nuxt-app 项目名

Project name TiBug.Nuxt //项目名称
Project description //项目描述
Use a custom server framework //选择通用的服务端渲染模板框架：none，是默认服务 Nuxt default serve
Use a custom UI framework //选择通用UI框架：Element
Choose rendering mode //选择渲染模式：SSR或SPA
Use axios module //是否使用 axios 进行http请求：yes
Use eslint //是否使用代码格式纠错: no，会各种格式警告
Use prettier //是否代码美化：yes
Author name //作者名
Choose a package //选择一个包管理：npm

├── assets // 资源文件。用于组织未编译的静态资源入LESS、SASS 或 JavaScript
│ └── logo.jpg // 默认logo图片
├── components // 组件。用于自己编写的Vue组件，比如滚动组件，日历组件，分页组件
│ └── AppLogo.vue // 默认logo组件
├── layouts // 布局。页面都需要有一个布局，默认为 default。它规定了一个页面如何布局页面。所有页面都会加载在布局页面中的 <nuxt /> 标签中。
│ └── default.vue // 默认模板页面，类似mvc中的layout
├── middleware // 中间件。存放中间件。可以在页面中调用： middleware: 'middlewareName' 。
├── pages // 页面。一个 vue 文件即为一个页面。
│ └── index.vue // 默认首页面
├── plugins // 用于存放JavaScript插件的地方
│ └── element-ui.js // 上边我们安装的UI框架
├── static // 用于存放静态资源文件，比如图片，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。
├── store // 用于组织应用的Vuex 状态管理。
├── .editorconfig // 开发工具格式配置
├── .eslintrc.js // ESLint的配置文件，用于检查代码格式
├── .gitignore // 配置git不上传的文件
├── nuxt.config.js // 用于组织Nuxt.js应用的个性化配置，比如网站title，已便覆盖默认配置
├── package.json // npm包管理配置文件
└── README.md // 说明文档

pages/
--| _slug // 以下划线开头的文件夹，代表参数
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue //以 下划线 开头的页面，动态路由
--| index.vue

router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'users-id',
path: '/users/:id?',
component: 'pages/users/_id.vue'
},
{
name: 'slug',
path: '/:slug',
component: 'pages/_slug/index.vue'
},
{
name: 'slug-comments',
path: '/:slug/comments',
component: 'pages/_slug/comments.vue'
}
]
}

<template>
<div>
<nuxt/> //这个就是页面入口，其他页面就是在这里进行嵌入的，可以对比MVC中 layout.cshtml 中的 @RenderBody()
</div>
</template><style>
</style>

<template>
<div id="app">
<el-row :gutter="" >
<el-col class="nav">
<el-col class="nav-bar" :sx="" :sm="" :md="" :lg="">
<div class="nav-bar-body">
<div class="nav-bar-inner">
<div id="logo">
<img
src="../assets/logoa.png" />
</div>
</div>
............
</el-row>
<div class="footer">京ICP备xxxxxxxx号</div>
</div>
</template>

data: function data() {
return {
data: ,
};
},
asyncData: function () {
var _asyncData = _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_2___default()(
/*#__PURE__*/
regeneratorRuntime.mark(function _callee(_ref) {
var params, tag, _ref2, data; return regeneratorRuntime.wrap(function _callee$(_context) {
while () {
switch (_context.prev = _context.next) {
case :
params = _ref.params;
_context.prev = ;
tag = params.tag;
_context.next = ;//axios http数据请求
return _plugins_axios__WEBPACK_IMPORTED_MODULE_3__["default"].get("/api/TopicDetail?page=1&tname=".concat(tag)); case :
_ref2 = _context.sent;
data = _ref2.data.data;
console.log(data);
debugger;
return _context.abrupt("return", {
tagList: data.data,
tagtitle: tag,
fadetitle: true,
notfound: !data.data.length
}); case :
_context.prev = ;
_context.t0 = _context["catch"](); case :
case "end":
return _context.stop();
}
}
}, _callee, this, [[, ]]);
})); function asyncData(_x) {
return _asyncData.apply(this, arguments);
} return asyncData;
}(),
components: {
ArticleList: _components_ArticleList__WEBPACK_IMPORTED_MODULE_4__["default"]
},

//页面渲染完毕后，监听滚动事件
mounted() {
window.addEventListener('scroll', this.handleScroll)
},
methods: {
//处理方法，在页面具体底部30像素的时候，触发事件
handleScroll() {
const jrscrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollT
let scrollBottom = document.body.clientHeight - window.innerHeight - jrscrollTop
if (scrollBottom < 30) {
if (this.ScrollFirst) {
this.nextpage() //触发这个，下拉加载分页事件
}
}
}
},
//记得在销毁当前页面的时候，也就是切换的时候，把监听去掉
beforeDestroy() {
window.removeEventListener('scroll', this.handleScroll, fa
}

import axios from 'axios'//引入 axios 服务
let options = {}
if (process.server) {
// 配置基路由
options.baseURL = 'http://localhost:5000' // http://123.xx.xx.xx:5000（服务端地址）
}
export default axios.create(options) // 注意这里是直接 export 了一个对象实例，而不是 Vue.use，这个插件不需要注册

const {data: {response}} = await Vue.http.get('/api/TopicDetail/'+ id);//这个就是使用到了 Vue 对象

proxy: [
['/api', { target: 'http://localhost:5000' }],
['/images', { target: 'http://localhost:5000' }],// 将图片也代理到本地，下文的<上传图片>栏目会说到
// ['/api', { target: 'http://123.xx.xx.xx:3080' }],//服务端配置
] //还有这里
modules: [

// Doc: https://github.com/nuxt-community/axios-module#usage
'@nuxtjs/axios',
'@nuxtjs/proxy'
],

//当前组件中的数据变量
data() {
return {
page: ,
lastpage: true,
ScrollFirst: true,
};
},

// 一共有三种方法，这个最常用的一种方法，asyncData() 方法
async asyncData({ params }) {
try {
// 路由参数
const { tag } = params
// 获取异步得到的数据，必须使用 {} 大括号包裹
let { data } = await axios.get(`/api/TopicDetail/`)
console.log(data) // 如果想要获取返回数据 data 中的某一个属性，可以这么嵌套
const { data: { article } } = await axios.get(`/api/TopicDetail?page=`)
console.log(article) // 然后将得到的数据返回过去，其实和本身的 data() 有异曲同工之妙
return {
articleList: article,
tagtitle: tag,
fadetitle: true,
notfound: !article.length
}
} catch (err) {
error({statusCode: })
}
},

<el-col :xs="" :sm="" :md="" :lg="" v-for="item in articleList" :key="item.id" class="artitem" >

import Vue from 'vue'
import mavonEditor from 'mavon-editor'
Vue.use(mavonEditor)

[HttpPost]
[Route("Pic")]
public async Task<MessageModel<string>> InsertPicture([FromServices]IHostingEnvironment environment)
{
var data = new MessageModel<string>();
string path = string.Empty;
string foldername = "images";
var files = Request.Form.Files;
if (files == null || files.Count() <= ) { data.Msg = "请选择上传的文件。"; return data; }
//格式限制
var allowType = new string[] { "image/jpg", "image/png", "image/jpeg" };
string folderpath = Path.Combine(environment.WebRootPath, foldername);
if (!System.IO.Directory.Exists(folderpath))
{
System.IO.Directory.CreateDirectory(folderpath);
}
if (files.Any(c => allowType.Contains(c.ContentType)))
{
if (files.Sum(c => c.Length) <= * * )
{
//foreach (var file in files)
var file = files.FirstOrDefault();
string strpath = Path.Combine(foldername, DateTime.Now.ToString("MMddHHmmss") + file.FileName);
path = Path.Combine(environment.WebRootPath, strpath); using (var stream = new FileStream(path, FileMode.OpenOrCreate, FileAccess.ReadWrite))
{
await file.CopyToAsync(stream);
} data = new MessageModel<string>()
{
Response = strpath,
Msg = "上传成功",
Success = true,
};
return data;
}
else
{
data.Msg = "图片过大";
return data;
}
}
else {
data.Msg = "图片格式错误";
return data;
}
}

/// <summary>
/// 获取Bug数据列表（带分页）
/// </summary>
/// <param name="page">页数</param>
/// <param name="tname">专题类型</param>
/// <returns></returns>
[HttpGet]
public async Task<MessageModel<PageModel<TopicDetail>>> Get(int page = , string tname = "")
{
var data = new MessageModel<PageModel<TopicDetail>>();
int intTotalCount = ;
int TotalCount = ;
int PageCount = ;
List<TopicDetail> topicDetails = new List<TopicDetail>(); //总数据，使用AOP切面缓存
topicDetails = await _topicDetailServices.GetTopicDetails();
if (!string.IsNullOrEmpty(tname))
{
var tid = (await _topicServices.Query(ts => ts.tName == tname)).FirstOrDefault()?.Id.ObjToInt();
topicDetails = topicDetails.Where(t => t.TopicId == tid).ToList();
}
//数据总数
TotalCount = topicDetails.Count; //总页数
PageCount = (Math.Ceiling(topicDetails.Count.ObjToDecimal() / intTotalCount.ObjToDecimal())).ObjToInt(); //当前页数据
topicDetails = topicDetails.OrderByDescending(d => d.Id).Skip((page - ) * intTotalCount).Take(intTotalCount).ToList(); return new MessageModel<PageModel<TopicDetail>>()
{
Msg = "获取成功",
Success = topicDetails.Count >= ,
Response = new PageModel<TopicDetail>()
{
page = page,
pageCount = PageCount,
dataCount = TotalCount,
data = topicDetails,
}
}; }

/// <summary>
/// 通用返回信息类
/// </summary>
public class MessageModel<T>
{
/// <summary>
/// 操作是否成功
/// </summary>
public bool Success { get; set; } = false;
/// <summary>
/// 返回信息
/// </summary>
public string Msg { get; set; } = "服务器异常";
/// <summary>
/// 返回数据集合
/// </summary>
public T Response { get; set; } }/// <summary>
/// 通用分页信息类
/// </summary>
public class PageModel<T>
{
/// <summary>
/// 当前页数
/// </summary>
public int page { get; set; } = ;
/// <summary>
/// 总页数
/// </summary>
public int pageCount { get; set; } = ;
/// <summary>
/// 数据总数
/// </summary>
public int dataCount { get; set; } = ;
/// <summary>
/// 返回数据
/// </summary>
public List<T> data { get; set; }}