first

Dieinwarm · Oct 23, 2020 · 60c2d36 · 60c2d36
commit 60c2d36
Show file tree

Hide file tree

Showing 16 changed files with 731 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+/dist/
+/node_modules/
diff --git a/README.md b/README.md
@@ -0,0 +1,24 @@
+# 舔狗的艺术
+学习vue-cli的成果 🥝
+
+vue / vue-router / elementUI
+
+预览地址：https://dogart.me
+
+## 使用方式：
+
+安装vue-cli （见官网安装方式）
+
+拉取项目到本地
+
+用vue-cli 导入项目
+
+执行 npm update 更新依赖
+
+使用 vue ui 预览、编译项目
+
+编译后在dist目录里，可以导入其他项目二次开发实现前后端分离的项目
+
+## 不想修改和编译
+
+你可以点击 [这里](https://github.com/coolseamonster/dogartvue/releases/download/zip/dist.zip) 下载编译好的文件（不推荐）
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,14 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ],
+  plugins: [
+    [
+      'component',
+      {
+        libraryName: 'element-ui',
+        styleLibraryName: 'theme-chalk'
+      }
+    ]
+  ]
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,53 @@
+{
+  "name": "dogart",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "axios": "^0.19.2",
+    "core-js": "^3.6.5",
+    "element-ui": "^2.4.5",
+    "vue": "^2.6.12",
+    "vue-router": "^3.4.7"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^4.5.8",
+    "@vue/cli-plugin-eslint": "^4.5.8",
+    "@vue/cli-plugin-router": "^4.5.8",
+    "@vue/cli-service": "^4.5.8",
+    "@vue/eslint-config-standard": "^5.1.2",
+    "babel-eslint": "^10.1.0",
+    "babel-plugin-component": "^1.1.1",
+    "eslint": "^6.7.2",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "vue-cli-plugin-element": "^1.0.1",
+    "vue-template-compiler": "^2.6.12"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "@vue/standard"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}
diff --git a/public/css/base.css b/public/css/base.css
@@ -0,0 +1,158 @@
+[v-cloak] { display: none }
+.header {
+    font-size: 2rem;
+    font-weight: 400;
+    letter-spacing: -1px;
+    background: rgba(0,0,0,.65);
+    color: #fff;
+    margin: 0;
+    padding: .8em 0 .8em .5rem;
+}
+.el-menu-item {
+	font-size: 16px !important;
+}
+.content-box {
+    margin: 8rem auto 0;
+}
+.diary-content-box {
+    margin: 4rem auto 0;
+}
+.content {
+    padding: .5rem;
+    font-size: 18px;
+    min-height: 10rem;
+}
+.content .text {
+    min-height: 8rem;
+	line-height: 24px;
+}
+.diary-content {
+    padding: .5rem;
+    font-size: 18px;
+    min-height: 15rem;
+}
+.diary-content .diary-text {
+    min-height: 13rem;
+}
+.buttons {
+    padding-top: 1.5rem;
+    text-align: center;
+}
+.lickCount {
+    font-size: 12px;
+    padding-top: 2rem;
+    text-align: right;
+}
+.footer {
+    margin-top: 7rem;
+    text-align: center;
+    width: 100%;
+    margin-bottom: 1.5rem;
+}
+.footer-link{
+    margin: 0 15px;
+}
+.footer-text {
+    line-height: 30px;
+    color: #808B96;
+    font-size: 14px;
+}
+.el-header {
+    display: flex;
+    align-items: center;
+    justify-content:center
+}
+
+
+@media screen and (max-width: 768px) {
+    .header {
+        font-size: 1rem;
+    }
+    .content-box {
+        margin: 1rem auto 0;
+    }
+    .diary-content-box {
+        margin: 1rem auto 0;
+    }
+    .diary-content {
+        padding: 0;
+        font-size: 16px;
+    }
+    .content {
+        padding: 0;
+        font-size: 16px;
+    }
+    .content .text {
+    	line-height: 24px;
+    }
+    .diary-content .diary-text {
+        line-height: 22px;
+    }
+    .dialog{
+    	width: 95% !important;
+    }
+}
+
+@media screen and (min-width: 768px) and (max-width:992px) {
+    .header {
+        font-size: 2rem;
+    }
+    .content-box {
+        margin: 2rem auto 0;
+    }
+    .diary-content-box {
+        margin: 2rem auto 0;
+    }
+    .diary-content {
+        padding: 0;
+        font-size: 18px;
+    }
+    .content {
+        padding: 0;
+        font-size: 18px;
+    }
+    .content .text {
+    	line-height: 26px;
+    }
+    .diary-content .diary-text {
+        line-height: 24px;
+    }
+    .dialog{
+    	width: 60% !important;
+    }
+}
+
+@media screen and (min-width: 992px) and (max-width:1200px) {
+    .header {
+        font-size: 2.5rem;
+    }
+    .content-box {
+        margin: 2.5rem auto 0;
+    }
+    .diary-content-box {
+        margin: 2.5rem auto 0;
+    }
+    .diary-content {
+        padding: 0;
+        font-size: 20px;
+    }
+    .content {
+        padding: 0;
+        font-size: 20px;
+    }
+    .content .text {
+    	line-height: 28px;
+    }
+    .diary-content .diary-text {
+        line-height: 26px;
+    }
+    .dialog{
+    	width: 50% !important;
+    }
+}
+
+@media screen and (min-width: 1200px) {
+    .dialog{
+    	width: 30% !important;
+    }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/images/wechat.jpg b/public/images/wechat.jpg
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="stylesheet" href="<%= BASE_URL %>css/base.css">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+	<style>
+		body{
+			margin: 0;
+		}
+	</style>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,15 @@
+<template>
+  <div id="app">
+	<router-view></router-view>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'app'
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/components/index.vue b/src/components/index.vue
@@ -0,0 +1,89 @@
+<template>
+	<div>
+		<div class="header">🐶 舔狗的艺术</div>
+		<el-row type="flex" justify="center">
+			<el-col :xs="22" :sm="18" :lg="12">
+				<el-header style="height: 60px;margin: 10px 0;" >
+					<el-menu mode = "horizontal" text-color = "#2C3E50" active-text-color = "#3498DB"
+							 border-bottom = "none" router :default-active = "path">
+					<template v-for="(item, index) in nav_menu_data">
+						<el-menu-item :index = "item.path" :key = "index">
+							{{item.title}}
+						</el-menu-item>
+					</template>
+					</el-menu>
+				</el-header>
+				<router-view></router-view>
+			</el-col>
+		</el-row>
+		<el-dialog title="API" :visible.sync="apiDialog" custom-class="dialog" top="25vh">
+		  <p>目前采用的网络api，它们分别来自：</p>
+		  <p>https://api.uixsj.cn  提供了 舔狗の语 接口（其实是彩虹屁接口，两者都差不多）</p>
+		  <p>https://alapi.net  提供了 舔狗日记 接口</p>
+		  <p>https://heweather.net  提供了 舔狗日记的天气、城市 接口</p>
+		  <br />
+		  <p>对以上接口服务表示感谢</p>
+		</el-dialog>
+		<el-dialog title="关于" :visible.sync="aboutDialog" custom-class="dialog" top="15vh">
+		  <p>关于舔狗的艺术：做这个网站的初衷，是想 <del> 让大家在当舔狗的时候能够有范儿 </del> 让大家看看当舔狗的心酸，请大家多多关注舔狗这个群体，多给他们一点关爱</p>
+		  <p>后期计划：计划脱离网络api，自己存储数据，实现舔一舔（点赞）和投稿的功能，这个过程可能非常漫长，不是说技术上有多难实现，而是因为懒。</p>
+		  <p>如何联系你：你可以在Github上提交issues，我会看到的</p>
+		  <p>你是谁：<del> 大家好，我是傻逼 </del> 👏 Nobody cares.</p>
+		  <hr />
+		  <h3>Donate:</h3>
+		  <p>如果你认为这个网站对你有所帮助或者其他什么烂大街的理由，你可以用你的大手机扫一扫下面的神秘二维码，<del>你的赞赏将会用于服务器的购买和维护</del> 你就可以请我喝一杯咖啡。你可以在赞赏留言中留下姓名或称呼，我将不定期更新 <el-link type="primary">赞赏名单</el-link></p>
+		  <div style="text-align: center;"><img src="../../public/images/wechat.jpg" width="60%" /></div>
+		</el-dialog>
+		<el-dialog title="更新记录" :visible.sync="updateDialog" custom-class="dialog" top="25vh">
+		  <h3>2020.6.11</h3>
+		  <p>舔狗的艺术 上线</p>
+		  <p>开源到Github</p>
+		</el-dialog>
+		<div class="footer">
+		    <div style="line-height:30px;">
+		        <el-link type="primary" class="footer-link" :underline="false" @click="apiDialog = true">API</el-link>
+		        <el-link type="primary" class="footer-link" :underline="false" href="https://github.com/coolseamonster/dogartvue" target="_blank" >Github</el-link>
+		        <el-link type="primary" class="footer-link" :underline="false" @click="aboutDialog = true">关于</el-link>
+		        <el-link type="primary" class="footer-link" :underline="false" @click="updateDialog = true">更新日志</el-link>
+		    </div>
+		    <div class="footer-text">𝘽𝙪𝙞𝙡𝙙 𝙬𝙞𝙩𝙝 💔 𝘿𝙚𝙨𝙞𝙜𝙣𝙚𝙙 𝙗𝙮 𝙎𝙚𝙖𝙈𝙤𝙣𝙨𝙩𝙚𝙧.</div>
+		    <div class="footer-text" style="color: transparent;">I will always miss you like a darling.</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default{
+		data() {
+		    return {
+		        path: '',
+		        nav_menu_data: [{
+		            title: '舔狗の语',
+		            path: '/words'
+		        }, {
+		            title: '舔狗日记',
+		            path: '/diary'
+		        }],
+				apiDialog: false,
+				aboutDialog: false,
+				updateDialog: false
+		    }
+		},
+		methods:{
+		    onRouteChanged () {
+		        let that = this;
+		        that.path  = that.$route.path
+		    }
+		},
+		created () {
+		    this.onRouteChanged()
+		},
+		watch: {
+		    // 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可
+		    '$route': 'onRouteChanged'
+		}
+	}
+</script>
+
+<style>
+</style>