feat: 完成项目

Vue3 + Vue-router + Vuex + Vite + axios
AlanReumy · Jun 13, 2022 · ee02d82 · ee02d82
commit ee02d82
Show file tree

Hide file tree

Showing 33 changed files with 3,893 additions and 0 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,19 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true
+  },
+  extends: [
+    'plugin:vue/essential',
+    'standard'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module'
+  },
+  plugins: [
+    'vue'
+  ],
+  rules: {
+  }
+}
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -0,0 +1,60 @@
+name: Publish And Deploy Demo
+on:
+  push:
+    # tags:
+    #   - 'v*'
+    branches: [master]
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+
+    # 下载源码
+    - name: Checkout
+      uses: actions/checkout@master
+
+    # 打包构建
+    - name: Build
+      uses: actions/setup-node@master
+    - run: yarn
+    - run: yarn run build
+    - run: tar -zcvf release.tgz vite.config.js package.json yarn.lock
+
+    # 发布 Release
+    # - name: Create Release
+    #   id: create_release
+    #   uses: actions/create-release@master
+    #   env:
+    #     GITHUB_TOKEN: ${{ secrets.TOKEN }}
+    #   with:
+    #     tag_name: ${{ github.ref }}
+    #     release_name: Release ${{ github.ref }}
+    #     draft: false
+    #     prerelease: false
+
+    # 上传构建结果到 Release
+    # - name: Upload Release Asset
+    #   id: upload-release-asset
+    #   uses: actions/upload-release-asset@master
+    #   env:
+    #     GITHUB_TOKEN: ${{ secrets.TOKEN }}
+    #   with:
+    #     upload_url: ${{ steps.create_release.outputs.upload_url }}
+    #     asset_path: ./release.tgz
+    #     asset_name: release.tgz
+    #     asset_content_type: application/x-tgz
+
+    # 部署到服务器
+    - name: Deploy
+      uses: appleboy/ssh-action@master
+      with:
+        host: ${{ secrets.HOST }}
+        username: ${{ secrets.USERNAME }}
+        password: ${{ secrets.PASSWORD }}
+        port: ${{ secrets.PORT }}
+        script: |
+          cd /usr/share/nginx/Vue-Fiction
+          git pull
+          yarn
+          yarn run build
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn run lint
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}
diff --git a/README.md b/README.md
@@ -0,0 +1,32 @@
+# Vue3-Fiction🔥
+
+基于 Vue3 + Vue-router + Vuex 开发的📕小说网站，适合刚上手 Vue3 的小伙伴学习
+
+
+**技术栈**: Vue3、Vue-router、Vuex、Vite、axios
+
+### 预览✨
+
+[预览地址](http://139.196.47.8:8930/)
+
+首页：
+
+![首页](https://codertzm.oss-cn-chengdu.aliyuncs.com/img/20220612223809.png)
+
+小说详情：
+
+![小说详情](https://codertzm.oss-cn-chengdu.aliyuncs.com/img/20220612223903.png)
+
+章节内容：
+
+![章节内容](https://codertzm.oss-cn-chengdu.aliyuncs.com/img/20220612223926.png)
+
+### 工具🛠️
+
+代码规范：eslint + commitlint + commitizen
+
+自动化部署：GitHub Actions
+
+### 结语😍
+
+如果本项目对你有帮助的话，欢迎点个 ⭐Star 支持一下我噢！
diff --git a/commitlint.config.js b/commitlint.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional']
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vue3-Fiction</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "vue-fiction",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint --ext .js,.vue src",
+    "commit": "commit",
+    "prepare": "husky install"
+  },
+  "dependencies": {
+    "@commitlint/cli": "^17.0.2",
+    "axios": "^0.27.2",
+    "eslint": "^8.0.1",
+    "vue": "^3.2.25",
+    "vue-router": "4",
+    "vuex": "^4.0.2"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^17.0.2",
+    "@commitlint/prompt-cli": "^17.0.0",
+    "@vitejs/plugin-vue": "^2.3.3",
+    "eslint-config-standard": "^17.0.0",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-n": "^15.0.0",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-vue": "^9.1.1",
+    "husky": "^8.0.0",
+    "vite": "^2.9.9"
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,29 @@
+<script setup>
+</script>
+
+<template>
+  <div class="container">
+    <router-view>
+    </router-view>
+  </div>
+</template>
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+}
+html,body {
+  font-size: 62.5% !important;
+}
+::-webkit-scrollbar{
+  width: 0rem;
+}
+.container {
+  width: 75vw;
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>
diff --git a/src/apis/chapter.js b/src/apis/chapter.js
@@ -0,0 +1,5 @@
+import { http } from '../utils/http'
+
+export const getChapterApi = (fictionId) => {
+  return http.get(`/fictionChapter/search/${fictionId}`)
+}
diff --git a/src/apis/content.js b/src/apis/content.js
@@ -0,0 +1,5 @@
+import { http } from '../utils/http'
+
+export const getContentApi = (chapterId) => {
+  return http.get(`fictionContent/search/${chapterId}`)
+}
diff --git a/src/apis/search.js b/src/apis/search.js
@@ -0,0 +1,5 @@
+import { http } from '../utils/http'
+
+export const getSearchDataApi = (params) => {
+  return http.get(`/fiction/search/title/${params.key}/${params.from}/${params.size}`)
+}
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/components/chapter/chapter-header.vue b/src/components/chapter/chapter-header.vue
@@ -0,0 +1,85 @@
+<script setup>
+import { useStore } from 'vuex'
+const store = useStore()
+</script>
+
+<template>
+  <div class="chapter-header">
+    <div class="cover-wrap">
+      <img :src="store.state.chapterStore.cover" alt="" />
+    </div>
+    <div class="info">
+      <div class="title">{{ store.state.chapterStore.title }}</div>
+      <div class="descs">{{ store.state.chapterStore.descs }}</div>
+      <div class="author">作者：{{ store.state.chapterStore.author }}</div>
+      <div class="fictionType">类型：{{ store.state.chapterStore.fictionType }}</div>
+      <div class="updateTime">更新时间：{{ store.state.chapterStore.updateTime.substring(0,10) }}</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.chapter-header{
+  margin-top: 1rem;
+  display: flex;
+}
+.cover-wrap img {
+  width: 19rem;
+  height: 25rem;
+  background-size: cover;
+  border-radius: 0.5rem;
+}
+.info {
+  margin-left: 2.5rem;
+}
+.info > div {
+  margin-bottom: 0.5rem;
+}
+
+.title {
+  text-indent: 1rem;
+  margin-left: 1rem;
+  font-size: 2.3rem;
+  font-weight: bold;
+  margin-bottom: 1rem;
+}
+.descs {
+  height: 14.4rem;
+  text-indent: 2rem;
+  font-size: 1.3rem;
+  line-height: 2.5rem;
+  color: rgb(121, 121, 121);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 6;
+  -webkit-box-orient: vertical;
+}
+.author,.fictionType,.updateTime {
+  color: rgb(147, 147, 147);
+  font-size: 1.4rem;
+}
+
+@media (min-height: 60px) and (max-width:1120px){
+  .cover-wrap img{
+    width: 11rem;
+    height: 14rem;
+  }
+  .cover-wrap{
+    flex: 0.41;
+  }
+  .title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 1.8rem;
+  }
+  .descs {
+    height: 5.1rem;
+    -webkit-line-clamp: 2;
+  }
+  .author,.fictionType,.updateTime {
+    font-size: 1.1rem;
+  }
+}
+</style>
diff --git a/src/components/chapter/chapter-item.vue b/src/components/chapter/chapter-item.vue
@@ -0,0 +1,29 @@
+<script setup>
+defineProps({
+  data: Object
+})
+</script>
+
+<template>
+  <div class="chapter-item">
+    <div class="chapter-title">
+      {{ data.title }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.chapter-item {
+  height: 4rem;
+  line-height: 4rem;
+  border-bottom: 1px solid #eee;
+  transition: all 0.4s;
+}
+.chapter-item:hover {
+  background-color: #eee;
+}
+.chapter-title {
+  font-size: 1.4rem;
+  color: rgb(98, 98, 98);
+}
+</style>